分享一個微信小程序圖片裁剪插件蝙眶，很好用丧慈，支持旋轉(zhuǎn)
文檔：https://github.com/wx-plugin/image-cropper/tree/master? ??image-cropper
1.json文件中添加image-cropper
"usingComponents": {
????"image-cropper": "../plugin/image-cropper"
},
<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>
@import '../plugin/image-cropper.wxss'?
4.示例
Page({
data: {
? ? ?src:'',
? ? ?width:250,//寬度
? ? ?height: 250,//高度
},
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, // 當(dāng)前顯示圖片的http鏈接
? ? ? ?urls: [e.detail.url] // 需要預(yù)覽的圖片http鏈接列表
? ?})
}
})
? ? ? ? ? ? ? ? ? ? ? ? ????????下面是Demo的二維碼
