微信小程序 图片裁剪

微信小程序 图片裁剪

分享一个微信小程序图片裁剪插件，很好用，支持旋转

文档：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链接列表
       })
    }
})