收藏
回答

wx.canvasToTempFilePath导出图片尺寸受限?

想要实现的功能是将手机横屏拍摄的照片,通过canvas旋转方向并导出图片

手机横屏拍摄的图片尺寸为720*1410,页面宽度是360px,通过canvas旋转后绘制出的图片尺寸为360*183.8,到此无误

之后使用wx.canvasToTempFilePath,结果导出的图片被截取,尺寸则为300*150(乘以像素密度后为900*450)

通过更改wx.canvasToTempFilePath参数发现,尺寸小于300*150,则按参数进行截取,超出后则被限制为300*150

基础库:2.22.1

微信版本:8.0.19

手机:oppo reno

wxml:

<camera device-position="back" flash="off" binderror="error" style="width:100%;height:{{cameraH}}px;"></camera>
<canvas canvas-id="myCanvas" style="top:0;left:{{left}}px;width:{{canvasWidth}}px;height:{{canvasHeight}}px;"></canvas>

js:

this.ctx.takePhoto({
  quality: 'high',
  success: async (restp) => {
    const _that = this
    await new Promise(function (resolve, reject) {
      wx.startDeviceMotionListening({
        success: function () {
          wx.onDeviceMotionChange(function (resodm) {
            if (resodm.gamma < -40 || resodm.gamma > 40) {
              wx.offDeviceMotionChange()
              wx.getImageInfo({
                src: restp.tempImagePath,
                success(resgi) {
                  const device = wx.getSystemInfoSync();
                  let rate = resgi.width / resgi.height
                  console.log(resgi.height / resgi.width)
                  //将原图长度(也就是旋转后的宽度)固定为页面宽度
                  let height = device.viewWidth
                  let width = height * rate
                  let canvasContext = wx.createCanvasContext('myCanvas')
                  //存放旋转后的图片的画布的宽高
                  _that.setData({
                    canvasWidth: height,
                    canvasHeight: width,
                    left: 0,
                  })
                  if (resodm.gamma < -40) {//手机右转
                    canvasContext.rotate(90 * Math.PI / 180)
                    canvasContext.drawImage(restp.tempImagePath, 0, -height, width, height)
                  } else {//手机左转
                    canvasContext.rotate(-90 * Math.PI / 180)
                    canvasContext.drawImage(restp.tempImagePath, -width, 0, width, height)
                  }
                  //以上功能一切正常,canvas内图片尺寸为360px*183.8px
                  canvasContext.draw(true, async () => {
                    await new Promise(function (resolve, reject) {
                      wx.canvasToTempFilePath({
                        canvasId: 'myCanvas',
                        success(res) {
                          wx.getImageInfo({
                            src: res.tempFilePath,
                            success: function (resq) {
                              console.log(resq)//此次图片尺寸为900*450(乘以像素密度后的尺寸)
                            }
                          })
                          resolve()
                        }
                      }, this)
                    })
                  })
                  resolve()
                }
              })
            } else { }
          })
        }
      })
    })
  }
})
回答关注问题邀请回答
收藏

1 个回答

登录 后发表内容