傻逼了，兄弟們，uniapp和微信都有一個(gè)專門調(diào)用手機(jī)拍照和相冊(cè)的api?,拍完照片后會(huì)自動(dòng)根據(jù)設(shè)備方向翻轉(zhuǎn)，從而始終是正面。如果還想看canvas翻轉(zhuǎn)下面也有

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

?

?離譜，canvas實(shí)例要在onReady里面定義，我找了幾個(gè)小時(shí)才找到。

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

?由于開發(fā)需求是要豎著拍照橫著返回，所以就必須要旋轉(zhuǎn)圖片上傳，不然圖片上傳是豎著，獲取也是豎著的，影響觀看。

這里我用的是網(wǎng)上找到的畫布這個(gè)方法，改進(jìn)了一下畫布翻了一倍就是乘以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官網(wǎng)?uniapp 官網(wǎng)

因?yàn)楫嫴挤读耍敵龇毒驼酶采w，就是最后輸出圖像的寬高像素翻倍。

這也是別人改的，我就拿來用了，也算是學(xué)到了。我之前確實(shí)沒想到還能這么搞。

imgRotate(fileUrl) {

		console.log('imgRotate', fileUrl)
		//獲取圖片信息，獲取圖片的寬高，也可省略這一步
		uni.getImageInfo({
			src: fileUrl,
			success: res => {
			console.log('getImageInfo', res)
						
            // 逆時(shí)針反轉(zhuǎn)90度以畫布0,0為中心反轉(zhuǎn)
			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) => {
                      // 成功后要做的業(yè)務(wù)
                      
                    },
                    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)

故居人何在，唏噓滿頭白文章來源地址http://www.zghlxwxcb.cn/news/detail-639368.html

到了這里，關(guān)于uniapp 開發(fā)微信小程序用相機(jī)拍照后使用Canvas翻轉(zhuǎn)圖片的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！