微信小程序图片裁剪插件

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

文档：https://github.com/wx-plugin/image-cropper     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链接列表

   })

}

})

                                下面是Demo的二维码