小程序自定义相机，canvas实现图片裁剪功能

最近在写小程序项目，需要将拍摄的照片裁剪，去掉多余的部分。

说说本人遇到的bug，一开始在编辑器上测试，没有问题，后面真机调试或预览模式，裁剪的照片坐标都有问题，找了很久才发现是像素的原因，所以在写的时候，一定要特别注意“设备像素比”

重点一定要计算像素比，不然会得不到想要的效果.

该项目主要用于实现下图功能

wxml代码

	
		
		
			
			
			
                确定
                取消
            
		
		
	
    
        请拍摄身份证
        人像面
    





    
    
        
        
        重新绘制
        
        
        绘制完成
    

wxss代码

.lary-top{
  position: fixed;
  z-index: 101;
  top: 0;
  width: 100%;
  background:#3b8bff
}
.camera-photo{
    position: fixed;
    z-index: 100;
    overflow: hidden;
}
.page-flex{
    display: flex;
}
.page-mask{
    background-color: rgba(0,0,0,0.6);
  }
  .page-mask-lr{
    width: 90rpx;
  }
  .page-content{
    flex:1
  }
  .tackPhoto{
    color:#fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .confirm-photo{
      width: 130rpx;
      height: 130rpx;
      background-color: #3b8bff;
      border-radius: 50%;
      text-align: center;
      line-height: 130rpx;
  }
  .cancel{
    position: absolute;
    right: 90rpx;
}
.id-card{
  position: absolute;
  font-size: 36rpx;
  color: #fff;
  top:53%;
  right: 40rpx;
  display: flex;
  align-items: center;
  transform-origin: right;
  transform: rotate(90deg);
}
.id-card-text{
    color:#3b8bff
}
.canvas-style{
  margin: auto;
  overflow: hidden;
}
.base-img{
  position: fixed;
  z-index: 101;
}
.success-img{
  position: fixed;
  z-index: 101;
  background-color: black;
}
.after-img-tips{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  position: fixed;
  bottom: 75rpx;
  padding-left: 60rpx;
  padding-right: 60rpx;
  box-sizing: border-box;
}
.back{
  width: 141rpx;
  height: 141rpx;
}

js代码

const app = getApp()
let ctxWidth = '';
let ctxHeight = '';
let ctx = null; //Camera
let canvaCtx=null;//canvas
Page({
  data: {

  },
  changeText() {
    wx.getSystemInfo({
      success: res => {
        let convasX = res.screenWidth / 4; //遮罩层上下的高度(生成canvas的起始横坐标)
        let convasY = res.screenHeight / 5; //遮罩层左右的宽度(生成canvas的起始纵坐标)
        let canvasWidth = convasX * 3; //中间裁剪部位的宽度
        let canvasHeight = convasY * 3; //中间裁剪部位的高度
        let convasXL = convasX / 2;
        ctxWidth = canvasWidth; //canvas的宽度
        ctxHeight = canvasHeight; //canvas的高度
        this.setData({
          info: res,
          canvasWidth,
          canvasHeight,
          convasX,
          convasXL,
          convasY
        })
      }
    })
  },
  onLoad: function () {},
  onShow() {
    this.changeText()
  },
  takePhoto() {
    ctx = wx.createCameraContext(); //初始化camera
    ctx.takePhoto({ //生成图片
      quality: 'high',
      success: (res) => { //得到图片
        this.takeCanvas(res.tempImagePath)
        this.setData({
          baseImg: res.tempImagePath,
          isBaseImg: true,
          isCanvas:true
        })
      }
    })
  },
  takeCanvas(path) { //将拍摄的照片绘制到canvas上
    wx.getImageInfo({
      src: path,
      success: imgInfo => {
        let {info} = this.data;
        let convasX = imgInfo.width / 4;
        let convasY = imgInfo.height / 5;
        let canvasWidth = convasX * 3;
        let canvasHeight = convasY * 3;
        let convasXL = convasX / 2;
        // 我这里宽度和高度都计算了设备比，其实两个值是一样的 ，计算一个就够了
        let prxHeight = info.windowHeight / imgInfo.height;//计算设备比
        let prxWidth = info.windowWidth / imgInfo.width;//计算设备比
        // ctx = wx.createCanvasContext("myCanvas", this);//自定义组件，需要加this
        canvaCtx = wx.createCanvasContext("myCanvas");//自定义组件，需要加this
        canvaCtx.drawImage(path,convasXL,(convasY-40),canvasWidth,canvasHeight,0,0,(parseInt(canvasWidth) * prxWidth),(parseInt(canvasHeight) * prxHeight));//绘制到canvas上的位置，canvas的宽高等
        canvaCtx.draw(true, () => {
          wx.canvasToTempFilePath({
            fileType: "jpg",
            quality: 0.3,
            canvasId: "myCanvas",
            success: canvasToPath => {
              this.setData({
                isSuccess:true,
                isBaseImg: false,
                isCanvas:false,
                baseImg: canvasToPath.tempFilePath,
                srcCanvasPath: canvasToPath.tempFilePath
              })
            }
          })
          // wx.canvasToTempFilePath({
          //   fileType: "jpg",
          //   quality: 0.3,
          //   canvasId: "myCanvas",
          //   success: canvasToPath => {
          //     this.setData({
          //       isBaseImg: false,
          //       baseImg: canvasToPath.tempFilePath,
          //       srcCanvasPath: canvasToPath.tempFilePath
          //     })
          //   }
          // }, this)//自定义组件需要加this
        })
      }
    })
  },
  clearPhoto(){
    canvaCtx.clearRect(0,0,ctxWidth, ctxHeight)
    canvaCtx.draw()
    this.setData({
        srcCanvasPath:"",
        isCanvas:false,
        isSuccess:false,
        isBaseImg:false
    })
  },
  confirmBack(){//确定绘制成功后的操作，根据自己的需求写即可

  }
})

最终效果