更新记录

1.0.6（2025-01-19） 下载此版本

新增裁剪功能

1.0.5（2025-01-11） 下载此版本

新增双指放大缩小移动功能（因为小程序的canvas放大绘画不会跟着放大所以暂时不支持放大缩小）

1.0.4（2024-12-27） 下载此版本

新增获取横线长度方法

平台兼容性

chj-imgEdit 图片编辑器

平台兼容

代码演示

基本用法

<button @click="onClick" >开启图片编辑</button>
<chj-imgEdit ref="chjImgEdit" @confirm="confirm" @cancel="cancel" />

Vue/Nvue

export default {
    data(){
        return {

        }
    },
    methods:{
        onClick(){
            uni.chooseImage({
                count: 1,
                success: (res)=> {
                    this.$refs.chjImgEdit.open({
                        // 底图路径
                        path:res.tempFilePaths[0],
                        // 取消是否有弹窗提示
                        isCancelToast: true,
                        // 取消弹窗提示内容
                        cancelText:"确定真的退出吗?",
                        // 确定是否有弹窗提示
                        isConfirmToast: true,
                        // 确定弹窗提示内容
                        confirmText:"决定好了吗?",
                        // 设置图标
                        iconPath:{
                            reset:'/static/repeat-02.png'
                        },
                        // 设置涂鸦图标（根据下标匹配）
                        iconPathGraffiti:{
                            0:'/static/iconPathGraffiti-1.png'
                        }
                    });
                }
            });
        },
        confirm(path){
            console.log('确定');
            uni.previewImage({
                urls: [path],
            });
        },
        cancel(){
            console.log('取消');
        }
    }
}

API

Props

事件 Events

使用说明

打开图片编辑器，需要 chj-imgEdit 中声明 ref 属性

<chj-imgEdit ref="chjImgEdit" @confirm="confirm" @cancel="cancel" />

this.$refs.chjImgEdit.open(options);

options 参数说明

iconPath 参数说明

iconPathGraffiti 参数说明

按下标设置图片路径

iconPathGraffiti:{
    '0':'/static/iconPathGraffiti_1.png',
}