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


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 相关文章推荐
解析JavaScript中的标签语句
Jun 19 Javascript
SOSO地图JS画出标注和中心点以html形式运行
Aug 09 Javascript
table对象中的insertRow与deleteRow使用示例
Jan 26 Javascript
Javascript中this关键字的一些小知识
Mar 15 Javascript
javascript白色简洁计算器
May 04 Javascript
jQuery Easyui实现左右布局
Jan 26 Javascript
基于BootStarp的Dailog
Apr 28 Javascript
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 Javascript
详解Vue中的Props与Data细微差别
Mar 02 Javascript
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
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
让你的PHP,APACHE,NGINX支持大文件上传
2021/03/09 PHP
插件:检测javascript的内存泄漏
2007/03/04 Javascript
基于jquery实现漂亮的动态信息提示效果
2011/08/02 Javascript
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
Javascript表格翻页效果的具体实现
2013/10/05 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
JavaScript 继承详解(六)
2016/10/11 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
jquery利用json实现页面之间传值的实例解析
2016/12/12 Javascript
ionic2自定义cordova插件开发以及使用(Android)
2017/06/19 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
JQuery中queue方法用法示例
2019/01/31 jQuery
Javascript迭代、递推、穷举、递归常用算法实例讲解
2019/02/01 Javascript
Angular7创建项目、组件、服务以及服务的使用
2019/02/19 Javascript
vue设置动态请求地址的例子
2019/11/01 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
python2与python3爬虫中get与post对比解析
2019/09/18 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
如何在django中运行scrapy框架
2020/04/22 Python
pytorch cuda上tensor的定义 以及减少cpu的操作详解
2020/06/23 Python
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
公司司机岗位职责范本
2014/03/03 职场文书
优秀食品类广告词
2014/03/19 职场文书
三关爱志愿服务活动方案
2014/08/17 职场文书
我的中国梦演讲稿300字
2014/08/19 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
2015年质检工作总结
2015/05/04 职场文书
求职信:会计求职的写作技巧
2019/04/24 职场文书
浅析MongoDB之安全认证
2021/06/26 MongoDB
在Oracle表中进行关键词搜索的过程
2022/06/10 Oracle