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


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 相关文章推荐
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
Apr 06 Javascript
关于jQuery中的end()使用方法
Jul 10 Javascript
jQuery cdn使用介绍
May 08 Javascript
不使用浏览器运行javascript代码的方法
Jul 24 Javascript
js获得参数的getParameter使用示例
Feb 26 Javascript
自己编写的支持Ajax验证的JS表单验证插件
May 15 Javascript
JavaScript面对国际化编程时的一些建议
Jun 24 Javascript
JS组件Bootstrap Table使用实例分享
May 30 Javascript
原生js实现手风琴功能(支持横纵向调用)
Jan 13 Javascript
Thinkjs3新手入门之如何使用静态资源目录
Dec 06 Javascript
使用命令行工具npm新创建一个vue项目的方法
Dec 27 Javascript
微信小程序如何使用globalData的方法
Jun 06 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
第四节 构造函数和析构函数 [4]
2006/10/09 PHP
基于mysql的论坛(1)
2006/10/09 PHP
利用PHP判断文件是否为图片的方法总结
2017/01/06 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
原生js和jquery实现图片轮播淡入淡出效果
2015/04/23 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
2016/09/05 Javascript
js实现打地鼠小游戏
2017/02/13 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
详解Nodejs之npm&amp;package.json
2017/06/15 NodeJs
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
vue移动端实现红包雨效果
2020/06/23 Javascript
iconfont的三种使用方式详解
2018/08/05 Javascript
原生JS实现逼真的图片3D旋转效果详解
2019/02/16 Javascript
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
jQuery中实现text()的方法
2019/04/04 jQuery
js核心基础之闭包的应用实例分析
2019/05/11 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
JS三级联动代码格式实例详解
2019/12/30 Javascript
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
python 内置函数filter
2017/06/01 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
Python socket聊天脚本代码实例
2020/01/02 Python
Pycharm制作搞怪弹窗的实现代码
2021/02/19 Python
html5 拖拽上传图片实例演示
2013/04/01 HTML / CSS
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
我的求职计划书
2014/01/10 职场文书
税务干部鉴定材料
2014/02/11 职场文书
超市客服工作职责
2014/06/11 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
高中升旗仪式演讲稿
2014/09/09 职场文书
盲山观后感
2015/06/11 职场文书
公司董事任命书
2015/09/21 职场文书
Python办公自动化解决world文件批量转换
2021/09/15 Python