小程序上传头像前剪切图片

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使用