更新记录

1.0.0（2026-08-12） 下载此版本

• 首次发布：提供图片裁剪、旋转、翻转、滤镜、涂鸦、文字、马赛克、历史记录与导出能力。
• 支持App-Vue 与 H5，且不依赖第三方组件。

平台兼容性

AI 图片编辑器

组件名：ai-image-editor

零依赖的 Vue 2 uni-app 图片编辑组件，基于原生 Canvas 实现图片裁剪、旋转、翻转、滤镜、涂鸦、文字、马赛克、撤销/重做与图片导出。

安装

从插件市场导入后，保留项目中的 uni_modules/ai-image-editor 目录。项目已开启 easycom 时可直接使用组件；否则在页面中手动导入：

import AiImageEditor from '@/uni_modules/ai-image-editor/components/ai-image-editor/ai-image-editor.vue'

export default {
  components: { AiImageEditor }
}

基础使用

<template>
  <view>
    <ai-image-editor
      ref="editor"
      :src="imagePath"
      :width="canvasWidth"
      :height="420"
      :show-toolbar="true"
      :show-actions="true"
      @load="handleLoad"
      @export="handleExport"
    />
    <button @click="exportImage">获取编辑结果</button>
  </view>
</template>

<script>
export default {
  data() {
    return { imagePath: '', canvasWidth: 375 }
  },
  onLoad() {
    this.canvasWidth = uni.getSystemInfoSync().windowWidth
    this.imagePath = '/static/demo.jpg'
  },
  methods: {
    handleLoad(size) {
      console.log('图片尺寸：', size.width, size.height)
    },
    async exportImage() {
      const result = await this.$refs.editor.getImageData({ fileType: 'png', quality: 0.92 })
      console.log(result.tempFilePath)
    },
    handleExport(result) {
      console.log(result.tempFilePath)
    }
  }
}
</script>

属性

事件

方法

通过 ref 调用：

options 支持 fileType（png 或 jpg）与 quality（0 到 1）。

平台说明

• 已声明支持：微信小程序、App-Vue、H5、Vue 2；微信小程序请使用 1.0.1 或更高版本。
• H5 使用远程图片时，图片服务器必须配置 CORS；否则浏览器安全策略会限制 Canvas 导出。
• 微信小程序使用远程图片时，需在小程序后台配置下载域名。
• 微信小程序的 Canvas 为原生组件，组件已使用 cover-view 承载裁剪与文字覆盖层；请勿将组件放入 scroll-view、swiper、picker-view 或 movable-view。
• 调用 saveToAlbum 时，App 或小程序可能要求用户授权相册权限。
• 本组件不支持 nvue 和 Vue 3。

发布前检查

发布者请在插件市场后台补充真实的仓库地址、联系方式、预览图与演示地址；如变更平台支持范围，也请同步更新 package.json 的兼容性声明。