更新记录

1.1.2（2025-03-13） 下载此版本

增加保存图片时 quality:1 图片的质量为最高

1.1.1（2025-03-07） 下载此版本

改进保存后图片比例跟原始图片对不上的问题

1.1.0（2025-03-06） 下载此版本

新增完成编辑时是否获取整个canvas为图片

平台兼容性

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);

如果使用vue3语法，ref获取的组件下没有open方法可以使用以下方法解决。

import { getCurrentInstance } from 'vue'; 
const { proxy } = getCurrentInstance(); 
proxy.$refs.chjImgEdit.open();

options 参数说明

iconPath 参数说明

iconPathGraffiti 参数说明

按下标设置图片路径

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