更新记录

1.3.0（2026-06-16） 下载此版本

• 新增微信小程序保存编辑图支持，使用小程序 canvas 按当前缩放、旋转、镜像、位移状态重绘并导出临时文件
• 微信小程序端 sendUrl 返回 filePath，base64 为空，接入方可直接调用 uni.saveImageToPhotosAlbum
• 插件市场平台兼容性中恢复微信小程序支持声明

1.2.0（2024-09-20） 下载此版本

适配微信小程序最新基座

1.1.0（2024-07-17） 下载此版本

小程序兼容

平台兼容性

uni-app(4.15)

uni-app x(5.13)

cs-ImageEditor 组件

介绍

cs-ImageEditor 是一个用于图片编辑的组件，提供图片旋转、镜像等功能。它可以集成到您的项目中，方便用户对图片进行基本编辑操作。

安装

在插件市场将组件导入到uni_modules中

使用方法

引入组件

在您的页面或组件中引入 cs-ImageEditor。

<template>
  <view>
    <cs-ImageEditor ref="csImageEditor" :imageSrc="imageSrc" @sendUrl="updata" @error="onEditorError"></cs-ImageEditor>
  </view>
</template>

以下是 cs-ImageEditor 组件的属性 (Props)、事件 (Events) 和方法 (Methods) 的完整整理：

属性 (Props)

事件 (Events)

方法 (Methods)

平台兼容性

cs-ImageEditor 使用 renderjs 和 html2canvas 生成编辑后的图片，推荐在以下平台使用：

• App-Vue
• H5 移动端
• H5 PC 端现代浏览器（Chrome、Edge、Firefox、Safari）
• 微信小程序

不支持 App-nvue、快应用、IE。微信小程序使用组件内置 canvas 导出图片，sendUrl 返回的 base64 为空，filePath 为可保存到相册的临时路径。

权限声明

组件本身不采集任何数据，也不会主动申请系统权限。

如果接入项目需要选择相册/拍照或调用 uni.saveImageToPhotosAlbum 保存图片，请由接入项目按平台要求申请相册、相机或保存相册权限。

Android 权限示例

在 Android 平台，如果需要从相册读取或保存图片，请在项目中按目标系统版本配置相应权限：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.myapp">

    <!-- 示例：按项目实际需求和目标 Android 版本配置 -->
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

    <application
        ...>
        ...
    </application>
</manifest>

iOS 权限示例

在 iOS 平台，如果需要访问或保存到相册，请在项目中添加相应权限说明：

<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    ...
    <!-- 示例：按项目实际需求配置 -->
    <key>NSPhotoLibraryUsageDescription</key>
    <string>需要访问您的照片库以编辑和保存图片。</string>
    <key>NSPhotoLibraryAddUsageDescription</key>
    <string>需要访问您的照片库以保存编辑后的图片。</string>
    ...
</dict>
</plist>

注意事项

• 在使用相册、相机或保存图片能力时，请确保您的应用已经正确申请对应权限。
• 对于 Android 10 (API 级别 29) 及以上版本，需要使用 Scoped Storage 来访问外部存储。
• 在 iOS 平台，需要在应用启动时请求用户的权限。

通过添加这些权限声明，您的应用将能够正常使用 cs-ImageEditor 插件进行图片编辑和文件读写操作。

示例代码

<template>
  <view class="content">
    <cs-ImageEditor ref="csImageEditor" :imageSrc="imageSrc" @sendUrl="updata" @error="onEditorError"></cs-ImageEditor>
    <view style="margin-top: 100rpx;">
      <button type="primary" @tap="chooseImage">选择图片</button>
      <button style="margin-top: 20rpx;" type="primary" @tap="rotateCounterClockwise">旋转</button>
      <button style="margin-top: 20rpx;" type="primary" @tap="mirrorImage">镜像</button>
      <button style="margin-top: 20rpx;" type="primary" @tap="save">保存图片到相册</button>
    </view>
    <image v-if="tempFilePath" :src="tempFilePath" mode="widthFix" style="width: 300px;height: 300px;"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: '',
      tempFilePath: '',
    };
  },
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.imageSrc = res.tempFilePaths[0];
        },
        fail: (err) => {
          console.error('选择图片失败：', err);
        },
      });
    },
    rotateCounterClockwise() {
      this.$refs.csImageEditor.rotateCounterClockwise();
    },
    mirrorImage() {
      this.$refs.csImageEditor.mirrorImage();
    },
    save() {
      this.$refs.csImageEditor.saveImage();
    },
    updata(obj) {
      this.tempFilePath = obj.filePath;
      // #ifdef APP-PLUS || MP-WEIXIN
      uni.saveImageToPhotosAlbum({
        filePath: obj.filePath,
        success: () => {
          uni.showToast({
            title: '图片保存成功',
            icon: 'success'
          });
        },
        fail: (err) => {
          console.error(err);
          uni.showToast({
            title: '图片保存失败',
            icon: 'none'
          });

        }
      });
      // #endif
      // #ifdef H5
      uni.showToast({
        title: '图片已生成，可预览后自行保存',
        icon: 'none'
      });
      // #endif
    },
    onEditorError(err) {
      console.error('图片编辑失败：', err);
    },
  },
};
</script>

注意事项

• 插件导入到 uni_modules 后，通常可通过 easycom 直接使用 <cs-ImageEditor>。
• 组件方法通过 ref 调用，例如 this.$refs.csImageEditor.saveImage()。
• 组件的事件通过 @ 符号来绑定，例如 @sendUrl="updata"。
• 修改 imageSrc 后组件会自动重新初始化，一般不需要手动调用 init()。
• 需要调用 saveImage() 方法才会通过 sendUrl 返回编辑后的图片。
• H5 端返回的 filePath 通常是 blob 地址，可用于预览；保存到本地需由业务自行处理下载交互。
• 如果使用远程图片，图片服务器需要允许跨域访问，否则浏览器可能因 canvas 安全限制导致生成失败。
• 微信小程序端如果使用远程图片，请在小程序后台配置对应的合法下载域名，否则可能无法获取可绘制的本地图片路径。

更新日志

• 初始版本发布

联系方式

如果有任何问题或建议，请联系我们：陈先生的小前端,首页置顶文章下方留言

希望 cs-ImageEditor 组件能够帮助您轻松实现图片编辑功能！