收藏
回答

Canvas 2d 旋转图片在ios真机上与开发者工具输出不同(感觉高度少了一半)?

//旋转图像
  async RoImage(url) {
    let autoRotate = this.data.autoRotate,
      off = wx.createOffscreenCanvas({ type'2d' }),
      image = off.createImage();
    await new Promise((resolve, reject) => {
      wx.getImageInfo({
        src: url, success(res) {
          //image.src = url;
          image.name = res.type;
          //变量定义、赋值
          let width = res.width,
            height = res.height;
          console.log('[RoImage]处理前尺寸: ' + width + ' x ' + height);
          //绘制canvas 旋转图片
          const $ = wx.createSelectorQuery();
          $.select('#canvas').fields({ node: true, size: true }).exec((res) => {
            const canvas = res[0].node;
            const ctx = canvas.getContext('2d');
            let bg = canvas.createImage();
            bg.src = url;
            bg.onload = () => {
              if (height > width && autoRotate == '1') {//自动旋转
                //旋转图片开始
                console.log('旋转90度');
                //画板宽高调换
                canvas.width = height;
                canvas.height = width;
                //图片开始旋转
                ctx.translate(height / 2, width / 2);//原点移动到(/2, /2)中心点
                ctx.rotate(270 * Math.PI / 180);//-90度
                ctx.drawImage(bg, -width / 2, -height / 2, width, height);
                //图片宽高调换
                let ro_w = width, ro_h = height;
                width = ro_h; height = ro_w;
                console.log('[RoImage]处理后尺寸: ' + width + ' x ' + height);
              } else {
                //画板宽高调换
                canvas.width = width;
                canvas.height = height;
                console.log('[RoImage]跳过旋转: ' + width + ' x ' + height);
                ctx.drawImage(bg, 00, width, height);
              }
              //canvas转文件的临时路径 (本地路径)
              wx.canvasToTempFilePath({
                canvas, quality: 1, fileType: "jpg",
                success: (res) => {
                  //保存图片到本地
                  wx.saveImageToPhotosAlbum({
                    filePath: res.tempFilePath,
                    success: (res) => {
                      console.log(res);
                    }
                  });
                  console.log('[RoImage]处理完成', res.tempFilePath);
                  image.src = res.tempFilePath;
                  image.onload = resolve;  // 绘制图片逻辑
                }
              })
            }
          })
        }, fail(res) {
          image.src = url;
          console.log(res);
          image.onload = reject;  // 绘制图片逻辑
        }
      });
    })
    return image;
  },

开发者工具:

ios真机:

回答关注问题邀请回答
收藏

1 个回答

登录 后发表内容