微信小程序实现拍照画布指定区域生成图片
微信(小程序)  /  管理员 发布于 4年前   1209
最近写识别行驶证功能,点击拍照把指定区域截取,生成图片功能。
系统相机。该组件是原生组件,使用时请注意相关限制。 扫码二维码功能,需升级微信客户端至6.7.3。
微信小程序Camera相机地址
我们看下效果:
1、首先生成一个CanvasContext:
/** * 生命周期函数--监听页面加载 */ onLoad: function(options) { requireJs.adaptionIphoneX(this); this.ctx = wx.createCameraContext() },
2、相机的 wxml样式
中华人民共和国机动车行驶证 (行驶证主页) 请对准左下角发证机关印章 {{skipphotoStatus==1?"跳过":""}}
3、相机的 wxss样式
.camerabgImage-view{ height: 100%; width: 100%; position:absolute;}.bgImage{ width: 100%; height: 100%; position: absolute;} .cameratop-view1{ margin-top: 174rpx;}.cameratop-view2{ margin-top: 220rpx;}.cameratop-view1, .cameratop-view2{ width: 100%; display: flex; justify-content: center; position: absolute; font-family: PingFangSC-Medium; font-size: 36rpx; color: #FFFFFF; letter-spacing: 0; text-align: center;} .cameracenter-view{ height: 44rpx; width: 100%; position: absolute; font-family: PingFangSC-Medium; font-size: 32rpx; color: #FFFFFF; letter-spacing: 0; text-align: center;} /* 底部 */.camerabotton-view{ height: 200rpx; width: 100%; position:absolute; display: flex; justify-content: space-around; align-items: center;}.cancelphoto{ width: 50rpx; height: 50rpx;}.takephoto{ width: 132rpx; height: 132rpx;}.skipphoto{ font-family: PingFangSC-Regular; font-size: 32rpx; color: #FFFFFF; letter-spacing: 0; text-align: center;}
4、js 中访问原生组件 camera 主要针对相机权限处理
微信小程序权限地址
onShow: function() { var that = this wx.authorize({ scope: 'scope.camera', success: function (res) { that.setData({ isShowCamera: true, }) }, fail: function (res) { console.log("" + res); wx.showModal({ title: '请求授权您的摄像头', content: '如需正常使用此小程序功能,请您按确定并在设置页面授权用户信息', confirmText: '确定', success: res => { if (res.confirm) { wx.openSetting({ success: function (res) { console.log('成功'); console.log(res); if (res.authSetting['scope.camera']) { //设置允许获取摄像头 console.log('设置允许获取摄像头') wx.showToast({ title: '授权成功', icon: 'success', duration: 1000 }) that.setData({ isShowCamera: true, }) } else { //不允许 wx.showToast({ title: '授权失败', icon: 'none', duration: 1000 }) wx.redirectTo({ url: 'addCarInfo/addCarInfo', }) } } }) } else { //取消 wx.showToast({ title: '授权失败', icon: 'none', duration: 1000 }) wx.redirectTo({ url: 'addCarInfo/addCarInfo', }) } } }) } }) },
5、页面初始化数据
/** * 页面的初始数据 */ data: { isShowCamera: false, width: 10, height: 10, src: "", image: "", skipphotoStatus: "0",// 1跳过 0没有跳过 isShowImage: false },
6、点击拍照 设置照片, 返回拍照图片
/** * 拍照 */ takePhotoAction: function() { var that = this that.ctx.takePhoto({ quality: 'high', //高质量 success: (res) => { this.loadTempImagePath(res.tempImagePath); }, }) },
7、针对原图片截取尺寸 与 截取后的图片
loadTempImagePath: function(options) { var that = this that.path = options wx.getSystemInfo({ success: function(res) { // 矩形的位置 var image_x = 15; var image_y = 150; var image_width = that.data.width - 2 * 15; var image_height = 238; wx.getImageInfo({ src: that.path, success: function(res) { that.setData({ isShowImage: true, }) that.canvas = wx.createCanvasContext("image-canvas", that) //过渡页面中,图片的路径坐标和大小 that.canvas.drawImage(that.path, 0, 0, that.data.width, that.data.height) wx.showLoading({ title: '数据处理中...', icon: 'loading', duration: 10000 }) // 这里有一些很神奇的操作,总结就是MD拍出来的照片规格居然不是统一的过渡页面中,对裁剪框的设定 that.canvas.setStrokeStyle('black') that.canvas.strokeRect(image_x, image_y, image_width, image_height) that.canvas.draw() setTimeout(function() { wx.canvasToTempFilePath({ //裁剪对参数 canvasId: "image-canvas", x: image_x, //画布x轴起点 y: image_y, //画布y轴起点 width: image_width, //画布宽度 height: image_height, //画布高度 destWidth: image_width, //输出图片宽度 destHeight: image_height, //输出图片高度 success: function(res) { that.setData({ image: res.tempFilePath, }) //清除画布上在该矩形区域内的内容。 // that.canvas.clearRect(0, 0, that.data.width, that.data.height) // that.canvas.drawImage(res.tempFilePath, image_x, image_y, image_width, image_height) // that.canvas.draw() wx.hideLoading() console.log(res.tempFilePath); //在此可进行网络请求 PublicJS.drivinglicenseUpload(res.tempFilePath, that.uploadFile); }, fail: function(e) { wx.hideLoading() wx.showToast({ title: '出错啦...', icon: 'loading' }) if (this.data.skipphotoStatus == 1) { wx.redirectTo({ url: 'addCarInfo/addCarInfo', }) } else { wx.navigateBack({ delta: 1 }); } } }); }, 1000); } }) } }) }, // 接口返回结果 uploadFile: function(data) {}
微信小程序Canvas画布地址
1.canvas组件是由客户端创建的原生组件,它的层级是最高的。
2.请勿在scroll-view中使用canvas组件。
3.css动画对canvas组件无效。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号