#微信小程序-Canvas实现对图片裁剪，旋转后裁剪，裁剪框可拖动#

1.使用方法 引入组件

{

    "usingComponents": {

      "cropper": "../../components/cropper/index",

      "nav": "../../components/nav/index"

    },

    "disableScroll": true

  }

2.目录

3.wxml引用

  <view 
      class="canvas" 
      style="width: {{canvas.width}}px;height:{{canvas.height}}px;">
      <cropper 
        class="cropper"
        src="{{src}}"
        rotate="{{rotate}}"
        bindimgUrl="getUrl"
      ></cropper>
  </view>

4.js

// Pages/index/index.js
Page({


  /**
   * 页面的初始数据
   */
  data: {
    src: '',
    canvas: {
      width: wx.getSystemInfoSync().windowWidth,
      height: wx.getSystemInfoSync().windowHeight - 150 - getApp().data.navBarHeight,
    },
    screenRatio: getApp().data.screenRatio,
    rotate: 0
  },
  onLoad: function (options) {
    this.ctx = wx.createCameraContext();
    this.cropper = this.selectComponent(".cropper");
  },
  chooseImage() {
    let _self = this;
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success (res) {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths[0];
        _self.setData({
          src: tempFilePaths
        })
        _self.cropper.init(tempFilePaths)
      }
    })
  },
  canvasInit() {
    // 通过 SelectorQuery 获取 Canvas 节点
    const query = 
          query.select('.cropper');
          console.log(query.select('#my-canvas'))
  },
  setRotate() {
    let { rotate } = this.data;
    this.setData({
      rotate: rotate === 270 ? 0 : rotate + 90
    })
  },
  save() {
    this.cropper.save()
  },
  getUrl(e) { // 裁剪后的照片资源
    console.log(e.detail.url)
  }
})