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

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

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

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

wxml代码

<cover-view class="lary-top" style="height:{{info.statusBarHeight}}px;"></cover-view><camera class="camera-photo" frame-size="small" device-position="{{devBack}}" flash="off" binderror="error" style="width:{{info.windowWidth}}px;height:{{info.windowHeight}}px;top:{{info.statusBarHeight}}px"><cover-view class="page-flex" style="width:{{info.windowWidth}}px; height:{{info.windowHeight}}px;"><cover-view style="height:{{info.windowHeight}}px;" class="page-mask page-mask-lr"></cover-view><cover-view class="page-content" style="height:{{info.windowHeight}}px;"><cover-view class="page-mask" style="height:{{convasY-40}}px;"></cover-view><cover-view style="width:{{canvasWidth}}px; height:{{canvasHeight}}px;margin:auto"></cover-view><cover-view class="page-mask tackPhoto" style="height:{{convasY+40}}px"><cover-view class="confirm-photo" bindtap="takePhoto">确定</cover-view><cover-view bindtap="cancelPhoto" class="cancel">取消</cover-view></cover-view></cover-view><cover-view style="height:{{info.windowHeight}}px;" class="page-mask page-mask-lr"></cover-view></cover-view><cover-view class="id-card">请拍摄身份证<cover-view class="id-card-text">人像面</cover-view></cover-view></camera><canvas wx:if="{{isCanvas}}" class="canvas-style" canvas-id="myCanvas" style="width:{{canvasWidth}}px; height:{{canvasHeight}}px;"></canvas><cover-image wx:if="{{isBaseImg}}" class="base-img" mode="aspectFit" style="width:{{info.windowWidth}}px;height:{{info.windowHeight}}px;top:{{info.statusBarHeight}}px" src="{{baseImg}}"></cover-image><cover-view wx:if="{{isSuccess}}" style="width:{{info.windowWidth}}px;height:{{info.windowHeight}}px;top:{{info.statusBarHeight}}px;" class="success-img"><cover-image style="width:{{canvasWidth}}px; height:{{canvasHeight}}px;margin:{{convasY-40}}px auto;" src="{{srcCanvasPath}}"></cover-image><cover-view class="after-img-tips" style="color:#fff"><!-- 取消绘制，重新绘制 --><!-- <cover-image class="back" src="../../../assets/back.png" catchtap="clearPhoto"></cover-image> --><cover-view class="back" catchtap="clearPhoto">重新绘制</cover-view><!-- 确定绘制，返回到相应的页面，或者隐藏camera组件 --><!-- <cover-image class="back" src="../../../assets/icon_05-min.png" catchtap="confirmBack"></cover-image> --><cover-view class="back" catchtap="confirmBack">绘制完成</cover-view></cover-view></cover-view>

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; //Cameralet canvaCtx=null;//canvasPage({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(); //初始化cameractx.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);//自定义组件，需要加thiscanvaCtx = wx.createCanvasContext("myCanvas");//自定义组件，需要加thiscanvaCtx.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(){//确定绘制成功后的操作，根据自己的需求写即可}})

最终效果

如果觉得《小程序自定义相机 canvas实现图片裁剪功能》对你有帮助，请点赞、收藏，并留下你的观点哦！