微信小程序 圖片裁剪

分享一個微信小程序圖片裁剪插件，很好用，支持旋轉

文檔：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: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, // 當前顯示圖片的http鏈接
            urls: [e.detail.url] // 需要預覽的圖片http鏈接列表
       })
    }
})