更新记录

1.0.0（2026-01-05） 下载此版本

v1.0.0

• 初始版本发布
• 支持裁剪、旋转、滤镜、涂鸦、文字功能
• 支持撤销/重做操作
• 兼容 Vue2/Vue3
• 支持 H5、微信小程序、支付宝小程序等多平台

平台兼容性

uni-app(3.6.15)

w-image-editor 图片编辑器

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

功能特性

• 裁剪 - 支持自由裁剪和多种比例（1:1, 4:3, 16:9）
• 旋转 - 左右旋转90度，水平/垂直翻转
• 滤镜 - 4种滤镜效果（原图、黑白、复古、反色）
• 涂鸦 - 8种颜色，可调画笔粗细（2-20px）
• 文字 - 添加可拖拽文字水印，支持颜色和大小设置
• 撤销/重做 - 支持操作历史记录

平台兼容性

安装方式

方式一：通过插件市场导入

在 HBuilderX 中，通过插件市场导入本插件。

方式二：手动安装

将 uni_modules/w-image-editor 目录复制到你的项目的 uni_modules 目录下。

基本使用

<template>
  <w-image-editor
    ref="editor"
    :src="imageSrc"
    :width="375"
    :height="500"
    @load="onLoad"
    @export="onExport"
  />
</template>

<script>
export default {
  data() {
    return {
      imageSrc: '/static/demo.jpg'
    }
  },
  methods: {
    onLoad(info) {
      console.log('图片加载成功', info)
    },
    onExport(result) {
      console.log('导出结果', result.tempFilePath)
    }
  }
}
</script>

属性说明

事件说明

方法说明

通过 ref 获取组件实例后，可调用以下方法：

使用示例

选择图片并编辑

<template>
  <view>
    <w-image-editor
      ref="editor"
      :src="imageSrc"
      :width="screenWidth"
      :height="400"
      @export="onExport"
    />
    <button @tap="chooseImage">选择图片</button>
    <button @tap="saveImage">保存</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: '',
      screenWidth: 375
    }
  },
  onLoad() {
    this.screenWidth = uni.getSystemInfoSync().windowWidth
  },
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          this.imageSrc = res.tempFilePaths[0]
        }
      })
    },
    async saveImage() {
      try {
        await this.$refs.editor.saveToAlbum()
        uni.showToast({ title: '保存成功' })
      } catch (e) {
        uni.showToast({ title: '保存失败', icon: 'none' })
      }
    },
    onExport(result) {
      // 可以上传到服务器
      console.log(result.tempFilePath)
    }
  }
}
</script>

自定义工具栏

<template>
  <w-image-editor
    :src="imageSrc"
    :tools="['crop', 'rotate', 'filter']"
    :show-actions="false"
  />
</template>

获取编辑后的图片数据

// 获取 base64 格式（H5）或临时文件路径（小程序）
const result = await this.$refs.editor.getImageData({
  fileType: 'jpg',
  quality: 0.8
})

// 上传到服务器
uni.uploadFile({
  url: 'https://your-api.com/upload',
  filePath: result.tempFilePath,
  name: 'file'
})

注意事项

1. 跨域图片：H5 环境下，编辑网络图片需要服务器支持 CORS，否则无法进行像素级操作。

2. 小程序限制：小程序环境下，部分滤镜效果可能与 H5 有差异，因为小程序不支持 CSS filter。

3. 性能优化：编辑大尺寸图片时，建议适当降低 pixelRatio 以提升性能。

4. 内存管理：历史记录会占用内存，默认最多保存 20 步。如需更多步骤，请注意内存使用。

更新日志

v1.0.0

• 初始版本发布
• 支持裁剪、旋转、滤镜、涂鸦、文字功能
• 支持撤销/重做操作
• 兼容 Vue2/Vue3
• 支持 H5、微信小程序、支付宝小程序等多平台

问题反馈

如有问题或建议，请在插件市场留言或提交 Issue。