cs-ImageEditor 组件

介绍

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

安装

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

使用方法

引入组件

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

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

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

属性 (Props)

事件 (Events)

方法 (Methods)

平台兼容性

cs-ImageEditor 插件支持以下平台和版本区间：

Android

• 适用版本区间：4.4 (API级别 19) - 14.0 (API级别 34)
• CPU类型：
• armeabi-v7a：支持
• arm64-v8a：支持
• x86：支持

iOS

• 适用版本区间：iOS 9.0 - iOS 15.0

权限声明

本插件需要申请以下系统权限：

• 文件读写权限(如果图片需要相机或相册的话)

Android 权限示例

在 Android 平台，需要在 AndroidManifest.xml 文件中添加相应的权限声明：

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

    <!-- 文件读写权限 -->
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

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

iOS 权限示例

在 iOS 平台，需要在 Info.plist 文件中添加相应的权限声明：

<!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>

注意事项

• 在使用 cs-ImageEditor 插件时，请确保您的应用已经正确申请了上述权限。
• 对于 Android 10 (API 级别 29) 及以上版本，需要使用 Scoped Storage 来访问外部存储。
• 在 iOS 平台，需要在应用启动时请求用户的权限。

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

示例代码

<template>
  <view class="content">
    <cs-ImageEditor ref="csImageEditor" :imageSrc="imageSrc" @sendUrl="updata"></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" @click="save">保存图片到相册</button>
    </view>
    <image v-if="tempFilePath" :src="tempFilePath" mode="widthFix" style="width: 300px;height: 300px;"></image>
  </view>
</template>

<script>
export default {
  components: {
    csImageEditor: require('path-to-cs-ImageEditor'),
  },
  data() {
    return {
      imageSrc: '/static/image.jpg',
      tempFilePath: '',
    };
  },
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.imageSrc = res.tempFilePaths[0];
          console.log(this.imageSrc);
          this.$refs.csImageEditor.init();
        },
        fail: (err) => {
          console.error('选择图片失败：', err);
        },
      });
    },
    rotateCounterClockwise() {
      this.$refs.csImageEditor.rotateCounterClockwise();
    },
    mirrorImage() {
      this.$refs.csImageEditor.mirrorImage();
    },
    save() {
      this.$refs.csImageEditor.saveImage();
    },
    updata(obj) {
      uni.saveImageToPhotosAlbum({
        filePath: obj.filePath,
        success: () => {
          uni.showToast({
            title: '图片保存成功',
            icon: 'success'
          });
        },
        fail: (err) => {
          console.error(err);
          uni.showToast({
            title: '图片保存失败',
            icon: 'none'
          });
          
        }
      });
    },
  },
};
</script>

注意事项

• 确保在使用 cs-ImageEditor 组件之前，已经正确引入了组件文件。
• 组件的方法需要通过 ref 来调用，例如 this.$refs.csImageEditor.init()。
• 组件的事件通过 @ 符号来绑定，例如 @sendUrl="updata"。
• 需要调用saveImage事件才会返回保存后的图片url

更新日志

• 初始版本发布

联系方式

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

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