更新记录
1.1.0(2024-07-17) 下载此版本
小程序兼容
1.0.0(2024-07-09) 下载此版本
1.0.0 版本,使用请看readme文件
平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.7.3 app-vue app-nvue | √ | √ | √ | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
√ | √ | √ | √ |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
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)
属性名 | 类型 | 默认值 | 描述 |
---|---|---|---|
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
文件中添加相应的权限声明:
<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
组件能够帮助您轻松实现图片编辑功能!