uniapp vue3 裁剪头像(ksp-cropper) 支持旋转 和 缩放

一、前言

自己写个项目，需要用到裁剪头像功能，那肯定就在插件市场搜索，找到了它，感谢作者这个插件，很棒。我的使用环境 uniapp vue3 移动端 Android 真机测试。

具体我使用后的效果图如下：下面我主要是详细的补充一下ksp-cropper官方文档

二、使用场景效果图和代码

 解释操作逻辑：我点击右上角三个点图标，进入相册选择图片，得到选择的图片路径赋值给

ksp-cropper 组件，此时进入裁剪模式。点击确认，将得到裁剪后的图片路径。具体代码如下

 三、遇到的问题解释

1. 在app移动端状态下，无法上下左右拖拽

答：解决办法是进入源码uni_modules下面，找到ksp-cropper.vue文件，将其中的 event.preventDefault(); event.stopPropagation(); 两行代码注释即可

2. 安卓真机会一直卡在 处理中

答：是因为没在取消 和确定的处理函数中，将url的值设置为空。

3. 点击 确认裁剪 得到的路径是相对路径

_doc/uniapp_temp_1667466828646/canvas/16674669200830.png

这样的路径，可以显示图片，但无法通过 new plus.io.FileReade 读取出来。

我的需求是需要将该图片转化为二进制。我将该相对路径转化成绝对路径后，

//将对象路径转化为绝对路径
let temp   = plus.io.convertLocalFileSystemURL('相对路径');
//将fill协议 拼接完成 绝对路径
let imgStr = "file://"+temp;