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


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 相关文章推荐
Prototype使用指南之range.js
Jan 10 Javascript
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
Dec 28 Javascript
javascript两段代码,两个小技巧
Feb 04 Javascript
jquery实现瀑布流效果分享
Mar 26 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
Bootstrap Modal遮罩弹出层(完整版)
Nov 21 Javascript
vue 的 solt 子组件过滤过程解析
Sep 07 Javascript
如何在微信小程序中存setStorage
Dec 13 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
Aug 10 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 Javascript
js闭包和垃圾回收机制示例详解
Mar 01 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
据说是雅虎的一份PHP面试题附答案
2009/01/07 PHP
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
PHP实现显示照片exif信息的方法
2014/07/11 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
PHP+Redis开发的书签案例实战详解
2019/07/09 PHP
实例讲解PHP表单
2020/06/10 PHP
点击文章内容处弹出页面代码
2009/10/01 Javascript
Chrome Form多次提交表单问题的解决方法
2011/05/09 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
实例讲解JavaScript中instanceof运算符的用法
2016/06/08 Javascript
详解vue表单验证组件 v-verify-plugin
2017/04/19 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
2017/06/04 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
node.js通过axios实现网络请求的方法
2018/03/05 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
浅析Vue实例以及生命周期
2018/08/14 Javascript
Python实现时钟显示效果思路详解
2018/04/11 Python
用pandas按列合并两个文件的实例
2018/04/12 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
python 连续不等式语法糖实例
2020/04/15 Python
python中字符串的编码与解码详析
2020/12/03 Python
基于 HTML5 Canvas实现 的交互式地铁线路图
2018/03/05 HTML / CSS
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
Hobbs官方网站:英国奢华女性时尚服装
2020/02/22 全球购物
通信生自我鉴定
2014/01/18 职场文书
房展策划方案
2014/06/07 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
保姆聘用合同
2015/09/21 职场文书
礼仪培训心得体会
2016/01/22 职场文书
课改心得体会范文
2016/01/25 职场文书
Nginx配置根据url参数重定向
2022/04/11 Servers