想要实现的功能是将手机横屏拍摄的照片,通过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 { }
})
}
})
})
}
})
你好,麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)