小程序裁剪组件,支持等比例裁剪,使用简单
小程序裁剪组件,支持等比例裁剪,使用简单。
1、首先在page.json文件中引入组件 page.json
{
...,
"usingComponents": {
"cropper":"cropper的路径/index"
}
}
2、在页面中使用
<cropper imageSrc="{{imgSrc}}" enableScale="{{true}}" ratio="{{2/1}}" bind:cropperDone="cropperDone" bind:cropperCancel="cropperCancel" bind:cropperFail="cropperFail"></cropper>
imageScale(String) : 要裁剪的图片地址,基本上市本地图片地址
enablseScale(Boolean): 是否开启等比例裁剪 可选参数
ratio(Number): 裁剪比例 默认为1 可选参数
cropperDone(Function):裁剪成功的回调
cropperCancel(Function): 裁剪取消的回调
cropperFail(Function):裁剪失败回调
Page({
cropperDone(e){
const{src,cropperData} = e.detail;
//src 最终裁剪图片地址
// cropperData 裁剪起点、大小信息
},
cropperCancel(){
// do something
},
cropperFail(e){
const err = e.detail;
console.log(err);
}
})
参考:传送门
有个bug,从上面中间那个点放大,框会超过图片
有没有遇到过,实际裁剪出来的图片和缩放框圈定的范围不一致的情况?
按确认打印cancel,demo
感谢分享很优秀,已经使用上。
谁有一个页面调用多次出现的问题
太感谢了!找了很久,你这个是最干净的一个!
还不错
我裁剪出来的图片怎么是白色的没有图像
图片拆剪后的地址可以直接渲染在页面上吗 还是需要下载
好人一生单身,感谢大佬