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

这篇具有很好参考价值的文章主要介绍了uniapp 开发微信小程序用相机拍照后使用Canvas翻转图片。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

傻逼了，兄弟们，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"></canvas>

uni.canvasToTempFilePath(object, component) | uni-app官网 uniapp 官网

小程序旋转canvas,uni-app,javascript,开发语言,vue,微信小程序

因为画布翻倍了，输出翻倍就正好覆盖，就是最后输出图像的宽高像素翻倍。

这也是别人改的，我就拿来用了，也算是学到了。我之前确实没想到还能这么搞。

imgRotate(fileUrl) {

		console.log('imgRotate', fileUrl)
		//获取图片信息，获取图片的宽高，也可省略这一步
		uni.getImageInfo({
			src: fileUrl,
			success: res => {
			console.log('getImageInfo', res)
						
            // 逆时针反转90度以画布0,0为中心反转
			this.canvas.rotate(-90 * Math.PI / 180);
            //图片资源位置 y轴 x轴 height width
			this.canvas.drawImage(fileUrl,-res.width,0, res.width, res.height);
            this.canvas.draw()
			setTimeout(() => {
              uni.canvasToTempFilePath({
                canvasId: 'myCanvas',
                x: 0,
                y: 0,
                quality: 1,
                width: res.height,
                height: res.width,
            //翻倍输出宽度
                destWidth: res.height * 2,
            //翻倍输出高度
                destHeight: res.width * 2,
                success: function (res) {
                  console.log(res.tempFilePath);
                  // 微信上传api
                  wx.uploadFile({
                    url: "填写你的上传地址",
                    filePath: res.tempFilePath,
                    name: 'file',
                    success: (val) => {
                      // 成功后要做的业务
                      
                    },
                    fail: (err) => {
                      uni.showToast({
                        title: '上传失败'+err,
                        icon: 'none',
                        duration: 1200
                      })
                    }
                  })
                },
                fail: function (res) {
                  console.log(res);
                  uni.showToast({
                    title: '拍照失败'+res,
                    icon: 'none',
                    duration: 1200
                  })
                }
              });
              },400)