微信小程序操作图片放大、缩小、旋转、拖拽

微信小程序操作图片放大、缩小、旋转、拖拽

在开发小程序的时候遇到了上传图片，然后编辑的需求。打算网上找一下相关代码组件的，就不用自己搞这么麻烦。经过一番折腾，还是没有找到如意的，最后自己弄好了，记录一下。

思路

用一个变量装着图片的全部编辑数据，包括偏移的x 和y、放大缩小的倍数、图片旋转的角度。每当这个变量改变的时候都重新绘制一下图片。

imgdata: {
      offsetX: 0,                                   //剪裁图片左上角坐标x
      offsetY: 0,                                   //剪裁图片左上角坐标y
      zoom: false,                                  //是否缩放状态
      distance: 0,                                  //两指距离
      scale: 1,                                     //缩放倍数
      rotate: 0                                     //旋转角度
 },

上传图片

  uploadTap() {
    //首次上传本地图片
    let _this = this
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['original'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success(res) {
        _this.setData({
          originUrl: res.tempFilePaths[0],//图片的本地路径
          cropperResult: ''
        })
        
        _this.initImg(res.tempFilePaths[0]);
      }
    })
  }

canvas

画图

drawImg(){
    let _this = this;  
    let bili = 1;
    ctx.save();
    let x = (_this.data.originImg.width - _this.data.originImg.width * cropData.scale) / 2;
    let y = (_this.data.originImg.height - _this.data.originImg.height * cropData.scale) / 2;
    //画布中点坐标转移到图片中心
    let movex = (cropData.offsetX + x) * bili + _this.data.originImg.width * cropData.scale/2 ;
    let movey = (cropData.offsetY + y) * bili + _this.data.originImg.height * cropData.scale/2;
    ctx.translate(movex, movey); //translate  对坐标原点进行缩放
    ctx.rotate(cropData.rotate * Math.PI / 180); //rotate  对坐标轴进行顺时针旋转
    ctx.translate(-movex, -movey); //translate    对坐标原点进行缩放
    let movex2 = (cropData.offsetX + x) ;
    let movey2 = (cropData.offsetY + y) ;
    ctx.translate(movex2, movey2); //translate  对坐标原点进行缩放
    ctx.scale(cropData.scale, cropData.scale)
    ctx.translate(-movex2, -movey2); //translate    对坐标原点进行缩放
    ctx.drawImage(_this.data.originImg.url, (cropData.offsetX + x) * bili, (cropData.offsetY + y) * bili, _this.data.originImg.width * bili , _this.data.originImg.height * bili );//绘制图像
    ctx.restore();
 }

效果预览

先录入信息，然后就可以去到生成海报页面。完美ending