uniapp 图片裁剪插件推荐

本文记录推荐一个 uniapp 高性能图片裁剪工具/插件，亲测使用非常方便且实用！

插件地址：ksp-cropper

插件的兼容性可以自行点击插件地址查看，目前兼容到 微信小程序 和 APP 部分版本，博主之前使用主要是针对微信小程序故使用体验非常好，下面介绍下使用的主要步骤：

1.将插件安装到自己的 uniapp 项目中

这个步骤没什么好说的，推荐直接在插件详情页面点击右侧的 “使用 HBuilderX 导入插件” 选择要导入的项目下载即可；

2.使用步骤

使用步骤推荐也可以直接查看插件官方的使用说明和示例。以下仅为博主个人使用步骤记录：

在需要裁剪图片的页面使用这个插件(如果项目是使用的 uni-ui 模板则直接像使用组件一样使用即可)，示例如下：

注：这里使用时的属性，具体可以参考插件官方给到的属性说明，比如 mode 这里的 fixed 表示裁剪模式为 固定大小的模式 常用于头像上传等场景；

@cancel 是监听裁剪时点击了“取消”按钮的事件，直接将 url 清空即可关闭裁剪页面（只要 url 有值裁剪页面就会显示出来进行裁剪）；

@ok 是监听到裁剪完成时的事件，此事件返还一个 event 参数，其中 event.path 即裁剪后的图片路径（将这个路径进行展示、上传到服务器即可）。

3.使用示例（比如换头像）

首先给原头像绑定点击事件，逻辑就是：打开相册或相机获取一张新的图片，代码如下：

            // 修改头像
			editAvatar() {
				let _this = this
				uni.chooseImage({
					count: 1,
					success(res) {
						_this.url = res.tempFilePaths[0]
					}
				})
			},

注：这里的 _this.url 指的就是定义在全局的，用于存储被裁剪图片的路径的字段（上面监听裁剪组件的 @cancel 取消事件时主要也是将此字段清空）。当 _this.url 被赋值后裁剪页面就会自动显示出来，这时用户进行裁剪图片，裁剪完成点击“确定”后就触发组件的 @ok 事件，我们通过事件参数 event.path 拿到裁剪后的图片路径，然后将这个路径替换原头像、或者上传到服务器等操作都可以，需要注意的是，这里最后我们要手动再把全局的 url 给清空，清空了 url 裁剪页面就会自动关闭。示例如下：

            // 头像裁剪完成
			onok(e) {
				this.techData.avatar = e.path
				this.url = ''		// 清空 url 关闭裁剪页面
			},

示例图：

 -->选择图片并裁剪  --> 监听裁剪完成获得裁剪后的图片并处理后续

 结语：

这个插件确实非常好用且实用，特别是针对微信小程序也非常友好，目前大小不到 8KB 。使用步骤简单，如果你的项目需要进行图片裁剪，那推荐给你快去试一试吧。