更新记录

1.1.4（2025-08-01） 下载此版本

新增增加水印功能

1.1.3（2025-05-24） 下载此版本

修复翻转后裁剪定位点不对问题；修复裁剪后保存图片会被拉伸问题；

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

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

平台兼容性

uni-app(4.07)

uni-app x(4.07)

chj-imgEdit 图片编辑器

平台兼容

代码演示

基本用法

<button @click="onClick">开启图片编辑</button>
<chj-imgEdit 
ref="imgEdit" 
:isAllCanvas="false"
@confirm="confirm" 
@cancel="cancel" 
@getLineLength="getLineLength" 
@getRectPosition="getRectPosition" 
@error="error" />

Vue/Nvue

import {ref} from "vue";
const imgEdit = ref(null);
function onClick() {
    uni.chooseImage({
        count: 1,
        success: (res) => {
            imgEdit.value.open({
                // 底图路径
                path: res.tempFilePaths[0],
                // 取消是否有弹窗提示
                isCancelToast: true,
                // 取消弹窗提示内容
                cancelText: '确定真的退出吗?',
                // 确定是否有弹窗提示
                isConfirmToast: true,
                // 确定弹窗提示内容
                confirmText: '决定好了吗?',
                // 设置图标
                iconPath: {
                    goForward_active: '/static/goForward.png',
                },
                // 设置涂鸦图标（根据下标匹配）
                iconPathGraffiti: {
                    0: '/static/iconPathGraffiti-1.png',
                },
                // 水印配置项
                watermarkConfig:{
                    text:'水印',
                    position: 'center',
                    color:'#fff',
                    x: 50,
                    y: 50,
                    size:20,
                }
            });
        }
    });
}

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',
}

watermarkConfig 参数说明