更新记录

1.0.0（2024-01-15）

1.0.0版本更新内容 1：图片旋转，镜像方法 2：图片内容边缘识别，随意拖动剪切

平台兼容性

原生插件通用使用流程：

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原生插件配置”->”云端插件“列表中删除该插件重新选择

UniComponent - 完全自定义界面组件，图片边缘识别，随意拖动剪切，图片旋转，图片镜像

插件说明

1.0.0：图片旋转，镜像方法
1.0.0：图片内容边缘识别，随意拖动剪切，

插件支持

目前UniComponent插件只支持.nvue文件

插件引入

1.下载或购买云插件
2.项目manifest.json -> App原生插件配置 -> 云端插件[选择云端插件]
3.使用云插件后，项目引入组件即可使用

插件使用demo

<!-- 边缘识别，图片剪切 -->
<template>
    <view>
        <view style="overflow-y: scroll;">
            <text style="font-size:30rpx;word-wrap:break-word;">
                完全自定义边缘识别，图片随意剪切，可单独使用，可配合使用
            </text>
            <text style="font-size:30rpx;word-wrap:break-word;">
                注意：剪切预览图片为初始图片，如果发生了旋转/镜像后图片会被替换为新的图片，结果会以最新的图片为剪切底图，以下功能请按照顺序调用
            </text>

            <!-- 剪切预览组件 -->
            <CustomImageCrop ref="CustomImageCrop" style="width:100%;height:200px;background-color: antiquewhite;">
            </CustomImageCrop>

            <button @click="imageRotate(filePath,90)">旋转图片</button>
            <button @click="imageMirror(filePath,true,false)">镜像图片</button>
            <button @click="confirmCrop()">确定剪切</button>
            <button @click="cancelCrop()">取消剪切</button>

        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            filePath: ''
        }
    },
    onLoad() {},
    mounted() {
        /**  
         * 边缘识别初始化
         * @param res - 成功示例：{"code":200,"data":string,"message":"success"}
         *                   --code=200: 图片剪切成功,data(string)=图片路径
         *                   --code=201: 图片剪切取消,data(string)=图片源路径
         *                   - 失败示例： {"code":500,data:null,"message":"error"}(message:错误信息)
         */
        this.$refs.CustomImageCrop.init((res) => {
            console.log("[CustomImageCrop:res]=", res);
            if (res.code == 200) {
                // 拍照后传入路径用于图片边缘识别和剪切 
                this.showToast("[CustomImageCrop] 图片剪切成功路径：" + res.data)
                this.$refs.CustomImageCrop.initCrop(res.data);
            }
            if (res.code == 201) {
                this.showToast("[CustomImageCrop] 图片剪切取消路径：" + res.data)
            }
            if (res.code == 202) {
                this.showToast("[CustomImageCrop] 对图片旋转指定角度：" + res.data)
            }
            if (res.code == 203) {
                this.showToast("[CustomImageCrop] 图片水平或垂直镜像：" + res.data)
            }
        })

        // 设置剪切
        // TODO filePath:需要剪切的本地图片路径, 通过拍照等方式获取即可
        // 测试时可先进入拍照后保存再进入该页面剪切
        this.filePath = uni.getStorageSync("filePath")
        console.log("[filePath]:", this.filePath)
        this.showToast("[CustomImageCrop] 图片路径：" + this.filePath)
        if (this.filePath) this.$refs.CustomImageCrop.initCrop(this.filePath);
    },
    methods: {
        showToast(c) {
            uni.showToast({
                title: c,
                icon: 'none'
            });
        },
        // TODO 注意：剪切预览图片为初始图片，如果发生了旋转/镜像后图片会被替换为新的图片，结果会以最新的图片为剪切底图，以下功能请按照顺序调用
        // 对图片旋转指定角度
        imageRotate(filePath, degree) {
            this.$refs.CustomImageCrop.imageRotate(filePath, degree);
        },
        // 图片水平或垂直镜像
        imageMirror(filePath, horizontal, vertical) {
            this.$refs.CustomImageCrop.imageMirror(filePath, horizontal, vertical);
        },
        // 确定剪切
        confirmCrop() {
            this.$refs.CustomImageCrop.confirmCrop();
        },
        // 取消剪切
        cancelCrop() {
            this.$refs.CustomImageCrop.cancelCrop();
        }
    }
}
</script>

<style>

</style>

更新内容

1.0.0版本更新内容
1：图片旋转，镜像方法
2：图片内容边缘识别，随意拖动剪切，

权限

读写文件权限：
android.permission.WRITE_EXTERNAL_STORAGE
android.permission.READ_EXTERNAL_STORAGE