更新记录

1.0.1（2024-08-05） 下载此版本

插件功能包含固定及自由比例、圆形框显示、多种图片格式等，界面简洁

平台兼容性

原生插件通用使用流程：

1. 购买插件，选择该插件绑定的项目。
2. 在HBuilderX里找到项目，在manifest的app原生插件配置中勾选模块，如需要填写参数则参考插件作者的文档添加。
3. 根据插件作者的提供的文档开发代码，在代码中引用插件，调用插件功能。
4. 打包自定义基座，选择插件，得到自定义基座，然后运行时选择自定义基座，进行log输出测试。
5. 开发完毕后正式云打包

付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios

注意事项：使用HBuilderX2.7.14以下版本，如果同一插件且同一appid下购买并绑定了多个包名，提交云打包界面提示包名绑定不一致时，需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择

如遇问题请提供详细信息如系统版本和型号、复现步骤、代码片段等

导入插件

 const syczuanImageCropper = uni.requireNativePlugin("syczuan-imageCropper");

使用方式

<template>
    <view>
    <text @click="chooseImage">选择图片裁剪</text>
    <image class="cropper_image" v-if="cropperImage" :src="cropperImage" mode="aspectFit" />
  </view>
</template>

<script>
export default {
 data() {
    return {
      cropperImage:"",
  },
  methods: {
    // 选择图片
    chooseImage(){
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album','camera'],
        success: (res) => {
          this.cropperImage(res.tempFiles[0].path);
        }
      });
    },
    // 裁剪图片 
    cropperImage(imagePath) {
      const syczuanImageCropper = uni.requireNativePlugin("syczuan-imageCropper");
      const params = {
        /**
         * 默认:无
         * 图片路径 需通过plus.io.convertLocalFileSystemURL转换
         */
        imagePath: plus.io.convertLocalFileSystemURL(imagePath),
        /**
         * 默认:jpeg
         * 图片格式 可选值:jpeg jpg png heic webp
         * iOS无效值: webp
         * Android无效值: heic
         */
        format: "jpeg",
        /**
         * 默认:1
         * 图片质量 可选值:0 ~ 1 (仅format为jpeg|jpg|webp时有效)
         */
        quality: 1,
        /**
         * 默认:原始比例
         * 初始化裁剪比例
         */
        ratio: 1 / 1,
        /**
         * 默认:false
         * 锁定裁剪比例
         */
        lockRatio: false,
        /**
         * 默认:false
         * 开启旋转手势
         * 仅Android
         */
        rotateGesture: false,
        /**
         * 默认:false
         * 隐藏旋转按钮
         * 仅iOS
         */
        hiddenRotateButton: false,
        /**
         * 默认:false
         * 是否为圆形裁剪框
         */
        isCircular: false,
        /**
         * 默认:无
         * 顶部标题 (ios端toolbarPosition为top时不显示)
         */
        title: "Test",
        /**
         * 默认:rgba(255,255,255,1)
         * 确认裁剪按钮颜色
         * 仅iOS
         */
        doneButtonColor: "rgba(255,255,255,1)",
        /**
         * 默认:rgba(255,255,255,1)
         * 取消裁剪按钮颜色
         * 仅iOS
         */
        cancelButtonColor: "rgba(255,255,255,1)",
        /**
         * 默认:bottom
         * 工具栏位置 可选值:top bottom
         * 仅iOS
         */
        toolbarPosition: "bottom",
      };
      syczuanImageCropper.cropper(
        params,
        // 确认裁剪回调
        (e) => {
          if (e.status === 200) {
            this.cropperImage = e.data.fileURL;
          } else {
            this.cropperImage = "";
          }
        },
        // 取消裁剪回调
        (e) => {
          console.log(e)
        }
      );
    }
  }
};
</script>

<style scoped>
.cropper_image {
  width: 700rpx;
  height: 350px;
  margin: 0 auto;
}
</style>

开始裁剪

syczuanImageCropper.cropper({params,confirmCallback,cancelCallback})

params<Object>参数说明

confirmCallback返回参数说明

cancelCallback返回参数说明

清除裁剪图缓存文件夹

syczuanImageCropper.clearCacheDir()