<camera mode="normal" resolution="high" device-position="back" flash="off" binderror="error" id="camera" bindinitdone="loadedmetadata" frame-size="medium">
        <view class="viewer"></view>
</camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<button type="primary" bindtap="savePhoto">保存</button>
<!-- <image mode="widthFix" src="{{src}}"></image> -->
<canvas type="2d" canvas-id="myCanvas" id="myCanvas"></canvas>

// pages/camera/camera.js
function convertToGrayscale(data) {
  let g = 0
  for (let i = 0; i < data.data.length; i += 4) {
                const luminance = (0.299 * data.data[i] + 0.587 * data.data[i+1] + 0.114 * data.data[i+2]) / 255;
                if (luminance > 150 / 255) {
                        data.data[i] = 0
                        data.data[i+1] = 0
                        data.data[i+1] = 0
                        data.data[i+3] = 0
                }
  }
  return data
}
let canvas = null;
Page({

  /**
   * 页面的初始数据
   */
  data: {
                takePicture: false,
                originWidth: 0,
                originHeight: 0,
  },
        takePhoto() {
                this.setData({
                        takePicture: true
                })
    const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality: 'original',
      success: (res) => {
        this.setData({
          src: res.tempImagePath
                                })
                                // wx.saveImageToPhotosAlbum({
                                //         filePath: res.tempImagePath
                                // })
                                wx.getImageInfo({
                                        src: res.tempImagePath,
                                        success: (res) => {
                                                console.log(res.width)
                                                console.log(res.height)
                                                this.setData({
                                                        originWidth: res.width,
                                                        originHeight: res.height,
                                                })
                                        }
                                })
                                this.drawCameraToCanvas(res.tempImagePath)
      }
    })
        },
        // 将摄像头画面绘制到canvas
        drawCameraToCanvas: function (temp) {
                var that = this
                const dpr = wx.getWindowInfo().pixelRatio
                const rate = wx.getSystemInfoSync().screenWidth/375
                const query = wx.createSelectorQuery()
                query.select('#myCanvas').fields({ node: true, size: true })
                        .exec((res)=>{
                                canvas = res[0].node
                                const ctx = canvas.getContext('2d')
                                
                                console.log(dpr)
                                console.log(rate)
                                canvas.width = 300
                                canvas.height = 100
                                ctx.scale(dpr, dpr)
                                const bg = canvas.createImage()
                                bg.src = temp
                                bg.onload = ()=>{
                                        ctx.drawImage(
                                                bg, 
                                                Math.round(225*(this.data.originWidth/750)), Math.round(300*(this.data.originWidth/750)), 
                                                Math.round(300*(this.data.originWidth/750)*dpr), Math.round(100*(this.data.originWidth/750)*dpr), 
                                                0, 0, 
                                                300, 100)
                                        var imgData = ctx.getImageData(0, 0, canvas.width,canvas.height)
                                        console.log(imgData)
                                        ctx.putImageData(convertToGrayscale(imgData), 0, 0);
                                }
                        })
        },
        savePhoto(){
                console.log('asd')
                wx.canvasToTempFilePath({
                        canvas: canvas,
                        fileType: 'png',
                        success: res => {
                                console.log(res)
                                wx.saveImageToPhotosAlbum({
                                        filePath: res.tempFilePath
                                })
                        },
                        fail: res => {
                                console.log(res)
                        }
                })
                
        },
})