小程序canvas图片旋转

 <!-- 旋转图片canvas -->
 <canvas canvas-id="camCacnvs" style="width:{{canvasWidth}}px;height:{{canvasHeight}}px;position:absolute;top:-2000%;" class="canvsborder"></canvas>

 //当前图片的地址  只能使用本地图图片 如果是网络图片 要下载到本地
 let tempFilePaths = res.tempFilePaths[0];  
        wx.getImageInfo({ // 获取图片的信息
          src:tempFilePaths,
          success:(msg)=>{
            console.log(msg)
            let height = msg.height / 2  //图片的高
            let width = msg.width / 2
            //开始旋转  旋转方向为顺时针  90  180  270  
            if(width<height){   // 竖变横   左为正底   旋转后 为下为正底
              that.setData({
                canvasWidth: height,
                canvasHeight: width,
              },()=>{
                console.log('这张图片 是竖的 要变成横屏的')
              //绘制canvas 旋转图片
              let canvas = wx.createCanvasContext('camCacnvs');
              // 逆时针旋转90度
              canvas.translate(height / 2, width / 2)
              canvas.rotate(270 * Math.PI / 180)
              canvas.drawImage(tempFilePaths, -width / 2, -height / 2, width, height);
              canvas.draw(false, () => { // 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中
              // 把当前画布指定区域的内容导出生成指定大小的图片。在 draw() 回调里调用该方法才能保证图片导出成功。
                wx.canvasToTempFilePath({ 
                  canvasId: 'camCacnvs',
                  success(vas) {
                    console.log(vas)
                    that.uploadImg(vas.tempFilePath);  

                  }
                })// 在自定义组件下，当前组件实例的this，以操作组件内 canvas 组件
              })
              })
            }

          }
        })

下载网路图片到本地

// 第一步： 既然要缓存图片，那么我们要先将图片下载下来。
// wx.downloadFile 必填参数url: 图片的地址。
//当图片下载成功以后，会返回给我们一个tempFilePath。临时的文件路径
//那么问题来了，这个临时的文件路径到底怎么理解呢？
//本地临时文件只能通过调用特定接口产生，不能直接写入内容。本地临时文件产生后，
//仅在当前生命周期内有效，重启之后即不可用。因此，不可把本地临时文件路径存储起来下次使用
//上面的是微信小程序 文档对临时的文件路径的解释。
//所以到这一步， 这个临时的文件路径不满足我们的需求。那么接下来我们怎么利用这个临时文件路径实现本地缓存呢？
wx.downloadFile({
      url: 'xxxxxxx',
      success: function(res) {
        if (res.statusCode === 200) {
          console.log('图片下载成功' + res.tempFilePath)
          // 第二步: 使用小程序的文件系统，通过小程序的api获取到全局唯一的文件管理器
          const fs = wx.getFileSystemManager()
          //  fs为全局唯一的文件管理器。那么文件管理器的作用是什么，我们可以用来做什么呢？
         //   文件管理器的作用之一就是可以根据临时文件路径，通过saveFile把文件保存到本地缓存.
          fs.saveFile({
            tempFilePath: res.tempFilePath, // 传入一个临时文件路径
            success(res) {
              console.log('图片缓存成功', res.savedFilePath) // res.savedFilePath 为一个本地缓存文件路径  
              // 此时图片本地缓存已经完成，res.savedFilePath为本地存储的路径。
              //小程序的本地文件路径标准： {{协议名}}://文件路径
              //协议名在 iOS/Android 客户端为 "wxfile"，在开发者工具上为 "http"，
              //开发者无需关注这个差异，也不应在代码中去硬编码完整文件路径。
              //好了，到此为止，我们已经把图片缓存到本地了，而且我们也得到了本地缓存的路径。
              // 那么我们把本地缓存的路径，通过小程序的数据缓存服务保存下来。
              // 下次打开小程序 首先去缓存中检查是否存在本地文件的缓存路径
              // 如果有，直接image src赋值本地缓存路径。
              //如果没有，则是第一次下载图片，或者用户手动清理缓存造成的。
              wx.setStorageSync('image_cache', res.savedFilePath)
            }
          })
        }else {
          console.log('响应失败', res.statusCode)
        }
      }

  wx.chooseImage({
        sizeType: ['original', 'compressed'],
        sourceType: [type],
        success: function(result) {
          let tempFilePaths = result.tempFilePaths // 获得文件地址
          wx.getImageInfo({ // 获取图片的信息
            src: tempFilePaths[0],
            success: (res) => {
              let canvasContext = wx.createCanvasContext('camCacnvs')
              // 下面按比例写死宽度高度是为了压缩图片提升上传速度，可按实际需求更改
              let rate = res.height / res.width 
              let width = 500
              let height = 500 * rate
              switch (res.orientation) { // 根据orientation值处理图片
                case ("up"):
                  //不需要旋转
                  _this.setData({
                    canvasWidth: width,
                    canvasHeight: height,
                  })
                  canvasContext.drawImage(tempFilePaths[0], 0, 0, width, height);
                  break;
                case ("down"):
                  //需要旋转180度
                  that.setData({
                    canvasWidth: width,
                    canvasHeight: height,
                  })
                  canvasContext.translate(width / 2, height / 2)
                  canvasContext.rotate(180 * Math.PI / 180)
                  canvasContext.drawImage(tempFilePaths[0], -width / 2, -height / 2, width, height);
                  break;
                case ("left"):
                  //顺时针旋转270度
                  that.setData({
                    canvasWidth: height,
                    canvasHeight: width,
                  })
                  canvasContext.translate(height / 2, width / 2)
                  canvasContext.rotate(270 * Math.PI / 180)
                  canvasContext.drawImage(tempFilePaths[0], -width / 2, -height / 2, width, height);
                  break;
                case ("right"):
                  //顺时针旋转90度
                  that.setData({
                    canvasWidth: height,
                    canvasHeight: width,
                  })
                  canvasContext.translate(height / 2, width / 2)
                  canvasContext.rotate(90 * Math.PI / 180)
                  canvasContext.drawImage(tempFilePaths[0], -width / 2, -height / 2, width, height)
                  break;
              }
              canvasContext.draw(false, () => { // 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中
                wx.canvasToTempFilePath({ // 把当前画布指定区域的内容导出生成指定大小的图片。在 draw() 回调里调用该方法才能保证图片导出成功。
                  canvasId: 'camCacnvs',
                  success(res) {
                    //
                 
                  }
                })
              })