image-cropper

一款高性能的小程序图片裁剪插件，支持旋转。

1.功能强大。

2.性能超高超流畅，大图毫无卡顿感。

3.组件化，使用简单。

4.点击中间窗口实时查看裁剪结果。

初始准备

下载 image-cropper 组件，并放入 components 文件里中。

1.json文件中添加image-cropper

    "usingComponents": {       "image-cropper": "components/image-cropper/image-cropper"    },    "navigationBarTitleText": "裁剪图片",    "disableScroll": true

2.wxml文件

<view><button bindtap="onUpload">上传图片</button><image wx:if="{{avatarUrl}}" src="{{avatarUrl}}" style="width:200rpx;height:200rpx;"></image><view wx:else>暂无头像</view></view><view wx:if="{{isShowImgCropper}}">  <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>  <button bindtap="submit" style="position:fixed;bottom:0;z-index:999;width:100%;">确定</button></view>

3.简单示例

  Page({  data: {    isShowImgCropper: false, // 是否显示组件    src: '', // 剪裁图片的url    width: 250, //宽度    height: 250, //高度  },  onUpload() {    const that = this;    wx.chooseImage({      count: 1,      sizeType: ['original', 'compressed'],      sourceType: ['album', 'camera'],      success(res) {        // tempFilePath可以作为img标签的src属性显示图片        const tempFilePaths = res.tempFilePaths;        //开始裁剪        that.setData({          src: tempFilePaths,          isShowImgCropper: true        });        wx.showLoading({          title: '加载中'        })      },      fail: err => {        console.log('上传失败：', err)      }    })  },  cropperload(e) {    //获取到image-cropper对象    this.cropper = this.selectComponent("#image-cropper");    console.log("cropper初始化完成");  },  loadimage(e) {    console.log("图片加载完成", e.detail);    wx.hideLoading();    //重置图片角度、缩放、位置    this.cropper.imgReset();  },  submit() {    this.cropper.getImg((obj) => {      // 这里就是想要截取的图片传给后台的虚拟路径      console.log(obj.url)      this.setData({        isShowImgCropper: false,        avatarUrl: obj.url      })    });  },  clickcut(e) {    console.log(e.detail);    //点击裁剪框阅览图片    wx.previewImage({      current: e.detail.url, // 当前显示图片的http链接      urls: [e.detail.url] // 需要预览的图片http链接列表    })    this.cropper.getImg((obj) => {      // 这里就是想要截取的图片传给后台的虚拟路径      console.log(obj.url)    })  },})

• 使用 image-cropper 组件
• 点击查看小程序 demo

参考：微信小程序上传图片裁剪工具image-cropper使用

原著是一个有趣的人,若有侵权,请通知删除