# cs-ImageEditor 组件

## 介绍

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

## 安装

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

## 使用方法

### 引入组件

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

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

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

## 属性 (Props)

| 属性名         | 类型     | 默认值           | 描述                                 |
|--------------|--------|----------------|------------------------------------|
| imageSrc     | String | '/static/image.jpg' | 图片的路径                             |
| boxWidth     | String | '100vw'        | 图片容器的宽度                            |
| boxHeight    | String | '100vw'        | 图片容器的高度                            |
| opacity      | Number | 0.4            | 遮罩层的透明度                            |
| circleDiameter | String | '345rpx'        | 圆形裁剪框的直径                            |
| showMasker   | Boolean | true           | 是否显示遮罩层                            |
| showRotateIcon | Boolean | true           | 是否显示旋转图标                            |

## 事件 (Events)

| 事件名       | 参数            | 描述                                 |
|------------|---------------|------------------------------------|
| sendUrl    | object          | 当图片编辑完成并发送时触发，返回编辑后的图片路径 |

## 方法 (Methods)

| 方法名                  | 描述                                 |
|-----------------------|------------------------------------|
| init()                | 初始化组件                                |
| rotateCounterClockwise() | 逆时针旋转图片                            |
| mirrorImage()         | 镜像图片                                |
| saveImage()           | 保存图片，返回一个对象，包含base64与临时路径filePath                               |

## 平台兼容性

`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` 文件中添加相应的权限声明：

```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` 文件中添加相应的权限声明：

```xml
<!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` 插件进行图片编辑和文件读写操作。

## 示例代码

```html
<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

## 更新日志

- 初始版本发布

## 联系方式

如果有任何问题或建议，请联系我们：[陈先生的小前端](https://www.chensheng.group/),首页置顶文章下方留言

---

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