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


Posted in Javascript onJuly 18, 2019

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

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

微信小程序Camera相机地址

我们看下效果:

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

1、首先生成一个CanvasContext:

/**
 * 生命周期函数--监听页面加载
 */
 onLoad: function(options) {
 requireJs.adaptionIphoneX(this);
 
 this.ctx = wx.createCameraContext()
 
 },

2、相机的 wxml样式

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

<camera wx:if='{{isShowCamera}}' device - position="width" flash="off" style="width:{{windowWidth}}px; height:{{windowHeight}}px;">
 
 <cover-view class='camerabgImage-view'>
  <cover-image class='bgImage' src='{{isIphoneX==true?"../../myImage/vehicle/biankuang_x.png":"../../myImage/vehicle/biankuang.png"}}'> </cover-image>
 
  <cover-view class='cameratop-view1'>中华人民共和国机动车行驶证</cover-view>
  <cover-view class='cameratop-view2'>(行驶证主页)</cover-view>
  <cover-view class='cameracenter-view' style='top:{{isIphoneX==true?"52%":"62%"}}'>请对准左下角发证机关印章</cover-view>
 
  <!-- 拍照按钮 --> 
  <cover-view class='camerabotton-view' style='bottom:{{isIphoneX==true?"75px":"0px"}}'>
  <cover-image class='cancelphoto' src='../../myImage/vehicle/quxiao.png' bindtap='cancelPhotoAction'></cover-image>
  <cover-image class='takephoto' src='../../myImage/vehicle/paizhao.png' bindtap='takePhotoAction'></cover-image>
  
  <cover-view class='skipphoto' bindtap='skipphotoAction'>{{skipphotoStatus==1?"跳过":""}}
  </cover-view>
  
  </cover-view>
 
 </cover-view>
 
 </camera>
 
 <canvas wx:if='{{isShowImage}}' canvas-id="image-canvas" style='width:{{windowWidth}}px; height:{{windowHeight}}px;'></canvas>

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组件无效。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
syntaxhighlighter 使用方法
Jul 02 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 Javascript
深入理解JS中的Function.prototype.bind()方法
Oct 11 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 Javascript
超简单的Vue.js环境搭建教程
Mar 17 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
Sep 14 Javascript
JavaScript设计模式之单例模式简单实例教程
Jul 02 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
Mar 29 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
微信小程序8种数据通信的方式小结
Feb 03 Javascript
VueCli4项目配置反向代理proxy的方法步骤
May 17 Javascript
vue3.0中使用element的完整步骤
Mar 04 Vue.js
vue使用video.js进行视频播放功能
Jul 18 #Javascript
百度小程序之间的页面通信过程详解
Jul 18 #Javascript
微信小程序如何获取群聊的openGid以及名称详解
Jul 17 #Javascript
vue+django实现一对一聊天功能的实例代码
Jul 17 #Javascript
微信小程序从注册账号到上架(图文详解)
Jul 17 #Javascript
js设置默认时间跨度过程详解
Jul 17 #Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
Jul 17 #Javascript
You might like
php chr() ord()中文截取乱码问题解决方法
2008/09/08 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
关于递归运算的顺序测试代码
2011/11/30 Javascript
JavaScript面向对象设计二 构造函数模式
2011/12/20 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/25 Javascript
javascript中的Function.prototye.bind
2015/06/25 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
2016/08/08 Javascript
防止Node.js中错误导致进程阻塞的办法
2016/08/11 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
2016/10/26 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
C#实现将一个字符转换为整数
2017/12/12 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
2018/05/13 Javascript
快速解决brew安装特定版本flow的问题
2018/05/17 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
python动态性强类型用法实例
2015/05/09 Python
python读取oracle函数返回值
2016/07/18 Python
Python实现破解猜数游戏算法示例
2017/09/25 Python
Python中defaultdict与lambda表达式用法实例小结
2018/04/09 Python
python 重命名轴索引的方法
2018/11/10 Python
python 自定义对象的打印方法
2019/01/12 Python
python 列表中[ ]中冒号‘:’的作用
2019/04/30 Python
Python内置方法实现字符串的秘钥加解密(推荐)
2019/12/09 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
司机岗位职责
2013/11/15 职场文书
校班主任推荐信范文
2013/12/03 职场文书
如何写你的创业计划书
2014/01/07 职场文书
双语教学实施方案
2014/03/23 职场文书
党的群众路线调研报告
2014/11/03 职场文书
导游词之山东孔庙
2019/11/04 职场文书
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers
PostgreSQL逻辑复制解密原理解析
2022/09/23 PostgreSQL
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS