微信小程序实现拍照画布指定区域生成图片

最近写识别行驶证功能，点击拍照把指定区域截取，生成图片功能。

系统相机。该组件是原生组件，使用时请注意相关限制。扫码二维码功能，需升级微信客户端至6.7.3。

微信小程序照相机相机地址

我们看下效果：

1、首老师成一个CanvasContext:

/** * 生命周期函数-监听页面加载*/onLoad:函数（选项){需要js。adaptioniphonex(this)；这个。CTX。createcamera context()}，2，相机的页面结构样式

摄像机wx : if=“{ { isshocamera } }”设备位置=' width ' flash=' off ' style=' width : { { window width } } px；'height : { { window height } } px“cover-view class=”camerabgImage-view”cover-image class=“bgImage”src=“{ { isIphoneX==true”././my IMage/vehicle/卞匡_ x . png ' : '././my IMage/车辆/边光。png ' } '/cover-image cover-view class='摄像机俯视图1 '中华人民共和国机动车行驶证/cover-view cover-view class='摄像机俯视图2 '(行驶证主页)/cover-view cover-view class=' camera center-view ' style=' top : { { ISIphonex==true '？52%':'62%'}}'请对准左下角发证机关印章/cover-view！-拍照按钮-cover-view class=' camera button-view ' style=' bottom : { { ISIphonex==true '？75px':'0px'} '封面-image class='cancelphoto' src='././我的图像/车辆/萧曲。png ' bind tap=' cancelPhotoAction '/cover-image cover-image class='拍照' src='././我的形象/车辆/牌照。png ' bind tap=' takeophoton '/cover-image cover-view class=' skip photo ' bind tap=' skip photo action ' { skip photo status==1？跳过： ' ' } }/cover-view/cover-view/cover-view/camera canvas wx : if=' { { isshoimage } } ' canvas-id=' image-canvas ' style=' width : { { window width } } px；'height : { { WindowHeight } } px '/can vas 3，相机的页面样式表样式。camerabgImage-view { height : 100%；宽度： 100%;位置：绝对；}.bgImage {宽度： 100%；高度： 100%;绝对位置：} .摄像头俯视图1 { margin-top : 174 rpx；}.摄像头俯视图2 { margin-top : 220 rpx；}.摄像机俯视图1 .摄像头俯视图2 {宽度： 100%；display : flex justice-内容中心：绝对位置：font-family : PingFangSC-中；font-size : 36rpxcolor: # FFFFFF字母间距： 0;文本对齐：中心；} .摄像机全景{ height: 44rpx宽度： 100%;绝对位置：font-family : PingFangSC-中；font-size : 32 rpxcolor: # FFFFFF字母间距： 0;文本对齐：中心；} /* 底部*/.相机按钮-视图{高度： 200 rpx宽度： 100%;位置：绝对；显示： flex证明内容：空间环绕；align-items:居中；}.cancelphoto { width: 50rpx高度： 50 rpx}.拍摄照片{ width : 132 rpxhway : 132 rpx }。跳过照片{ font-family : PingFangSC-Regular；font-size : 32 rpxcolor: # FFFFFF字母间距： 0;文本对齐：中心；}4、js中访问原生组件照相机主要针对相机权限处理

微信小程序权限地址

onShow:函数(){ var=this wx。授权({ scope : ' scope。相机'，成功：函数{那个。setdata({ isshocamera 3360 true，}) }，fail:函数(RES){控制台。日志(' RES ')；wx.showModal({ title: '请求授权您的摄像头，content: '如需正常使用此小程序功能，请您按确定并在设置页面授权用户信息，确认文本： '确定，成功： RES={ if(RES . confirm){ wx。open setting({ success : function(RES){ console。日志('成功');控制台。日志(RES)；if(RES . authsetting['作用域。相机']){//设置允许获取摄像头console.log('设置允许获取摄像头)wx.showToast({ title: '授权成功，icon:“成功”，持续时间： { 1000 })说明。setdata({ isshocamera 3360 true，})else {//不允许wx.showToast({ title: '授权失败，icon:“无”，持续时间： 1000 })wx。redirectto({ URL : ' AddCarinfo/AddCarinfo '，})} })} else {//取消wx.showToast({ title: '授权失败，icon:“无”，持续时间： 1000 })wx。redirectto({ URL : ' AddCarinfo/AddCarinfo '，})} } })})，5，页面初始化数据

/** * 页面的初始数据*/data : { is hocamera : false，width: 10，height: 10，src: ' '，image: ' '，skipphotoStatus: ' 0 '，//1跳过0没有跳过isShowImage: false }、6、点击拍照设置照片，返回拍照图片

/** * 拍照*/take photo action : function(){ var那=this。CTX。拍照({质量： '高'，//高质量成功：(RES)={ this。loadtempimagepath(RES . tempimagepath)；}, }) },7、针对原图片截取尺寸与截取后的图片

loadTempImagePath:函数（选项){ var那=这个。路径=选项wx。getsysteminfo({成功：函数(res) { //矩形的位置var image _ x=15 var image _ y=150 var image _ width=那个。数据。宽度-2 * 15；var image _ height=238wx。getimageinfo({ src :路径，成功：函数(RES){那。setdata({ is refresh : true，})表示。canvascontext=wx。createcanvascontext(' image-canvascontext '，即)//过渡页面中，图片的路径坐标和大小那个。帆布。绘制图像(即。路径，0，0，那个。数据。宽度，那个。数据。高度)wx。showloading({ title : '数据处理中.'，icon: 'loading '，duration: 10000 }) //这里有一些很神奇的操作，总结就是医学博士拍出来的照片规格居然不是统一的过渡页面中，对裁剪框的设定那个。帆布。setstrokestyle(' black ')表示。帆布。strokerect(image _ x，image_y，image_width，image _ height)。帆布。draw()setTimeout()函数(){ wx。canvastotempfilepath({//裁剪对参数canvasId: '图像-画布，x: image_x，//画布x轴起点y: image_y，//画布y轴起点宽度： image_width，//画布宽度height: image_height，//画布高度destWidth: image _ width，//输出图片宽度destHeight: image_height，//输出图片高度成功：函数{那个。setdata({ image : RES . tempfile path，}) //清除画布上在该矩形区域内的内容//that.canvas.clearRect(0，0，that.data.width，that。数据。身高)//那个。帆布。绘制图像(RES . tempfilepath，image_x，image_y，image_width，image _ height)//即。帆布。draw()wx。隐藏()控制台。日志(RES . tempfile path)；//在此可进行网络请求公共js。drive licenssupload(RES . tempfile path，即。upload file)；}，fail:函数{ wx。HideLoading()。wx。showToast({ title : '出错啦.'，图标： ' loading ' })如果(这。数据。skipphotostatus==1){ wx。redirectto({ URL : ' AddCarinfo/AddCarinfo '，})else { wx。navigateback({ delta : 1 })；} } });}, 1000);} }) } }) }, //接口返回结果上传文件：函数（数据){}微信小程序帆布画布地址

1 .画布组件是由客户端创建的原生组件，它的层级是最高的。

2.请勿在滚动视图中使用帆布组件。

3.css动画对帆布组件无效。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。