uniapp 开发微信小程序用相机拍照后使用Canvas翻转图片

原创

已于 2023-05-24 11:27:13 修改 · 2.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #javascript #开发语言 #vue #微信小程序

于 2023-04-28 01:24:05 首次发布

本文介绍了在uni-app中使用微信小程序的API进行拍照，然后通过Canvas进行图片翻转以实现竖拍横显的效果。关键在于在onReady中定义canvas实例，并利用canvas翻转技巧，确保图片清晰度。最后通过uni.canvasToTempFilePath将翻转后的图片导出。此方法解决了uni-app中图片自动翻转的问题，提高了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

傻逼了，兄弟们，uniapp和微信都有一个专门调用手机拍照和相册的api ,拍完照片后会自动根据设备方向翻转，从而始终是正面。如果还想看canvas翻转下面也有

uni.chooseMedia({
  mediaType: ['image'],
  sourceType: ['album','camera'],
  sizeType:  ['compressed'],
  camera: 'back',
  success: (res) => {
    // 成功后处理事件
  }
})

离谱，canvas实例要在onReady里面定义，我找了几个小时才找到。

onReady() {
   this.canvas = uni.createCanvasContext('myCanvas', this)
},

由于开发需求是要竖着拍照横着返回，所以就必须要旋转图片上传，不然图片上传是竖着，获取也是竖着的，影响观看。

这里我用的是网上找到的画布这个方法，改进了一下画布翻了一倍就是乘以2，清晰度还行吧。

	<canvas class="canvas" :style="'width:' + canvasWidth * 2 + 'px;height:' + canvasHeight* 2 + 'px'" canvas-id="myCanvas"
			:width="canvasWidth" :height="canvasHeight" id="myCanvas"></