当前位置：首页 > uni-app

uniapp 编辑图片

2026-02-06 01:41:06uni-app

图片编辑功能实现

在UniApp中实现图片编辑功能，可以通过以下方法完成。这些方法涵盖了基础裁剪、滤镜、涂鸦等常见需求。

使用uni.chooseImage选择图片 通过官方API选择本地图片或拍照，获取临时文件路径：

uni.chooseImage({
  count: 1,
  sourceType: ['album'],
  success: (res) => {
    this.tempFilePath = res.tempFilePaths[0]
  }
})

调用原生图片编辑器（App端） App端可使用原生插件或API实现高级编辑：

uni.navigateTo({
  url: '/pages/editor/editor?img=' + encodeURIComponent(this.tempFilePath)
})

H5端使用canvas处理 通过canvas实现基础编辑功能，以下为裁剪示例：

uniapp 编辑图片

const ctx = uni.createCanvasContext('editorCanvas')
ctx.drawImage(this.tempFilePath, 0, 0, 300, 300)
ctx.draw()

第三方插件集成

uView UI的图片裁剪组件 安装uView UI后使用其裁剪组件：

<u-cropper :src="tempFilePath" @confirm="confirmEdit"></u-cropper>

使用we-cropper插件 专门为小程序生态优化的裁剪工具：

uniapp 编辑图片

import WeCropper from '@/components/we-cropper'
this.cropper = new WeCropper({
  id: 'cropper',
  width: 300,
  height: 300
})

云服务解决方案

使用七牛云图片处理 上传后通过云服务参数处理图片：

// 生成带裁剪参数的URL
const finalUrl = `${qiniuUrl}?imageView2/1/w/200/h/200`

阿里云图片处理 类似七牛云的CDN图片处理能力：

const ossUrl = `${aliyunUrl}?x-oss-process=image/resize,w_300`

注意事项

小程序端需注意临时路径有效期
H5端canvas存在跨域限制需配置服务器CORS
App端原生编辑体验最佳但需处理平台差异
大图片处理建议分片或使用worker线程

完整示例代码

基础图片裁剪组件实现：

<template>
  <view>
    <canvas canvas-id="editorCanvas"></canvas>
    <button @tap="saveImage">保存编辑</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tempFilePath: ''
    }
  },
  methods: {
    saveImage() {
      uni.canvasToTempFilePath({
        canvasId: 'editorCanvas',
        success: (res) => {
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath
          })
        }
      })
    }
  }
}
</script>