如上图我在横屏调用takePhoto的时候会自己旋转,这就成竖屏展示的了???竖屏展示你倒是展示全点啊,去微信开发社区问,这半天也不回一句话。。。(这是我提的问题链接) https://developers.weixin.qq.com/community/develop/doc/000686b152c0e805694a398d951c00
求人不如求己还是自己试试吧,今天被我试出来了,下面说下解决方法
1.首先需要在wxml里面添加一个画布我们需要在画布上面操作这个图片
<canvas canvas-id="my-canvas" class="my-canvas" wx:if="{{isBackShow}}">
样式的话 width: 100%; height: 100vh;
样式可以动态设置图片的大小,我在横屏下动态设置的话图片显示的不全,所以就干脆100%了
2.调用拍照的方法Takephoto方法得到图片的URL然后去操作图片,代码看下面吧
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality: 'normal',
success: (res) => {
let url = res.tempImagePath;
wx.getImageInfo({
src: url,
success:res=>{
let canvasContext = wx.createCanvasContext('my-canvas', this)
// 下面按比例写死宽度高度是为了压缩图片提升上传速度,可按实际需求更改
let rate = res.height / res.width
let width =res.width
let height = res.height * rate
switch (res.orientation) { // 根据orientation值处理图片
case ("up"):
//不需要旋转
canvasContext.drawImage(url, 0, 0, width, height+100);
case ("down"):
//不需要旋转
canvasContext.drawImage(url, 0, 0, width, height+100);
break;
case ("left"):
// canvasContext.translate(height, width / 3)
// canvasContext.rotate(0 * Math.PI / 180)
canvasContext.drawImage(url, 0 , 0, width-200, height+100);
break;
case ("right"):
// canvasContext.translate(height, width / 3)
// canvasContext.rotate(0 * Math.PI / 180)
canvasContext.drawImage(url, 0 , 0, width-200, height+100);
break;
}
canvasContext.draw(false, () => { // 将之前在绘图上下文中的描述(路径、变形、样式)画到 canvas 中
wx.canvasToTempFilePath({ // 把当前画布指定区域的内容导出生成指定大小的图片。在 draw() 回调里调用该方法才能保证图片导出成功。
canvasId: 'my-canvas',
success(res) {
let filePath = res.tempFilePath
//这里可以直接展示图片
}
}, this)// 在自定义组件下,当前组件实例的this,以操作组件内 canvas 组件
})
}
})
}
如果按照上面的代码还有问题的话可以调整下面的三个方法。
// canvasContext.translate(height, width / 3)
// canvasContext.rotate(0 * Math.PI / 180)
canvasContext.drawImage(url, 0 , 0, width-200, height+100);