微信小程序 图片裁剪
分享一个微信小程序图片裁剪插件，很好用，支持旋转
文档：https://github.com/wyh19931106/image-cropper
1.json文件中添加image-cropper
"usingComponents": {
"image-cropper": "../plugin/image-cropper"
}
2.wxml文件
<image-cropper id="image-cropper" limit_move="true" disable_rotate="true" width="{{width}}" height="{{height}}" imgSrc="{{src}}" bindload="cropperload" bindimageload="loadimage" bindtapcut="clickcut"></image-cropper>
3.wxss文件末尾
@import '../plugin/image-cropper.wxss'
4.示例
Page({
data: {
src:'',
width:,//宽度
height: ,//高度
},
onLoad: function (options) {
this.cropper = this.selectComponent("#image-cropper");
this.setData({
src:"https://raw.githubusercontent.com/1977474741/image-cropper/dev/image/code.jpg",
});
wx.showLoading({
title: '加载中'
})
},
cropperload(e){
console.log("cropper初始化完成");
},
loadimage(e){
console.log("图片加载完成",e.detail);
wx.hideLoading(); //重置图片角度、缩放、位置
this.cropper.imgReset();
},
clickcut(e) {
console.log(e.detail); //点击裁剪框阅览图片
wx.previewImage({
current: e.detail.url, // 当前显示图片的http链接
urls: [e.detail.url] // 需要预览的图片http链接列表
})
}
})