小程序裁剪组件,支持等比例裁剪,使用简单
小程序裁剪组件,支持等比例裁剪,使用简单。
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);
}
})
参考:传送门
很好用,谢谢!
另外请问下,能否实现等比例圆形裁剪
利用canvas clip方法,圆形裁剪应该好实现 多谢提这个需求,我会考虑的
谢谢提示,也感谢你的开源,解决了我的一个问题。
代码已更新,已支持圆形裁剪