更新记录

1.0(2024-05-27)

1、1.0版本测试通过。支持 app (ios、安卓)、微信小程序。左旋转90度。右旋转90度。旋转180度。


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.6.17 app-vue app-nvue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
1.0

cs-rotate-img

1. 介绍

cs-rotate-img 就是一个最简单的图片旋转插件,主要功能。 旋转图片、按照你传入的比例压缩图片(主要针对app端),然后帮旋转后的图片保存到本地,帮本地的图片路径在回调给你。

2. 使用方法

<template>
  <view class="content">
    <csRotateImage ref="llRotateImage" @rotateHaveDone="rotateHaveDone"></csRotateImage>
  </view>
</template>

<script>
  import csRotateImage from '@/components/cs-rotate-img/cs-rotate-img';

  export default {
    components: {
      csRotateImage
    },
    data() {
    },
    onLoad() {
    },
    methods: {
      chooseImage() { 
        uni.chooseImage({
          count: 1, //默认9
          sizeType: ['compressed'], //可以指定是原图还是压缩图,默认二者都有
          sourceType: ['album'], //从相册选择
          success: (res) => {

            uni.showLoading({mask:true, title:'正在旋转'});

            // 默认,左旋转90度。压缩比为4
            this.$refs.llRotateImage.rotateImage({imgPath : res.tempFilePaths[0]})

            // scaleRatio 越大旋转后的图片内存越小
            // this.$refs.llRotateImage.rotateImage({imgPath : res.tempFilePaths[0], scaleRatio: 14})

            // 右旋转90度
            // this.$refs.llRotateImage.rotateImage({imgPath : res.tempFilePaths[0], rotateType : 'right'}) 

            // 旋转180度。 压缩比为10
            // this.$refs.llRotateImage.rotateImage({imgPath : res.tempFilePaths[0], rotateType : 'bottom', scaleRatio: 14})
          }
        });
      },
      rotateHaveDone(resultPath) { 
        uni.hideLoading();
        console.log(`旋转后的图片路径 : ${resultPath} `);
      }
    }
  }
</script>

3. 最后

有问题欢迎下方给我留言,请多指教。

4. 祝世界和平

隐私、权限声明

1. 本插件需要申请的系统权限列表:

相册

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问