更新记录

1.00（2026-08-07）

1、图片可全屏显示； 2、剪裁后问文字、涂鸦和马赛克位置不变； 3、多次剪裁不变形不位移； 4、导出图片与编辑界面保持一致； 5、按操作顺序绘制图形； 6、支持撤销和重做；

平台兼容性

uni-app(5.07)

HuTu-ImgEditor 图片编辑器

一个功能丰富的 uni-app 图片编辑组件，支持裁剪、旋转、滤镜、涂鸦、马赛克、文字标注等多种编辑功能，兼容 Vue2/Vue3 及多端平台。

功能特性

基本使用

<template>
  <xImgEditor
    :src="imageSrc"
    :showToolbar="true"
    :showActions="true"
    :tools="['crop', 'rotate', 'filter', 'draw', 'mosaic', 'text']"
    @load="onLoad"
    @export="onExport"
    @error="onError"
  />
</template>

<script>
export default {
  data() {
    return {
      imageSrc: '/static/demo.jpg'
    }
  },
  methods: {
    onLoad(info) {
      console.log('图片加载成功', info)
    },
    onExport(result) {
      console.log('导出图片路径', result.tempFilePath)
      console.log('图片尺寸', result.width, result.height)
    },
    onError(err) {
      console.error('图片加载失败', err)
    }
  }
}
</script>

属性说明

tools 默认值： ['crop', 'rotate', 'filter', 'draw', 'mosaic', 'text']

事件说明

注意事项

1. 组件默认占满全屏，宽高属性设为 0 时使用屏幕尺寸
2. 裁剪框需在图片区域内才有效，超出范围会提示无效裁剪区域
3. 文字添加后需点击 确认 按钮才会写入画布，否则仅作为预览
4. 导出图片为原图尺寸，不受屏幕缩放影响
5. 操作历史记录最多保存16步，超出后自动清理最早记录