当前位置:主页 > 产品展示 > 兰格精密泵 >

产品展示

Products Classification

yobo体育官网下载全站app:微信小法式如何自界说实现身份证拍摄和人脸信息拍摄?

  • 产品时间:2023-01-01 00:57
  • 价       格:

简要描述:最近公司接到一个项目,要求对海员信息举行录入,其中包罗海员证,身份证,以及人脸信息,要求根据一定的巨细举行拍摄,并压缩上传,笔者在此处也是踩到了诸多的坑,故记载自己的开发思路。...

详细介绍
本文摘要:最近公司接到一个项目,要求对海员信息举行录入,其中包罗海员证,身份证,以及人脸信息,要求根据一定的巨细举行拍摄,并压缩上传,笔者在此处也是踩到了诸多的坑,故记载自己的开发思路。

yobo体育官网下载全站app

yobo体育app官网入口

最近公司接到一个项目,要求对海员信息举行录入,其中包罗海员证,身份证,以及人脸信息,要求根据一定的巨细举行拍摄,并压缩上传,笔者在此处也是踩到了诸多的坑,故记载自己的开发思路。项目开发用的是uni-app,和原生小法式其实差不多,只是这个框架可以实现一端开发,多端运行打包公布,详细知识请自行百度,实现的效果如下:身份证拍摄人脸拍摄方案一:拿到需求最开始,想的是用一张中间透明的配景图,将相机放在最透明区域,这样就可以实现了,可是厥后发现,差别的手机分辨率差别,那么相机的巨细和位置也会发生变化,不能实现准确的定位相机,所以很快扬弃了这种想法。方案二:在顶部堆一个盒子,相机的双方个写一个自适应的盒子,在相机的底部写一个盒子,恰好将相机嵌在中间,可以实现了,可是发现差别的手机存在兼容性问题,部门手时机显示出盒子的边框,很丑,很快又放弃了这种做法。在这个历程中由于对照片要按一定巨细拍摄,所以调原生的相机肯定不行,调研发现通过小法式的api,调相机可行。

在这个历程中泛起了一个坑,就是图片压缩,在压缩的时候挪用了wx.compressImage(OBJECT),没想到上线后针对差别的机型,这个函数在锤子手机上竟然不支持,报错说不是一个函数。无奈又只得换一个压缩方式,决议接纳canvas绘制;效果又泛起坑,每次拍摄完成,图片都被发大了,最终逐一排查解决了这个坑。最终方案如下:1)、静态页面<template><view class="photo-idcard"><camera :device-position="postionType" flash="auto" class="camera-box"></camera><view class="notice" @click="changeCamareType">切换摄像头</view><button class="photo-btn" @click="takePhoto">照相</button><!-- 授权提示设置 start --><cover-view v-if="middle" class="modal-mask" bindtap="changeModalCancel"><cover-view class="modal-dialog"><cover-view class="modal-title">温馨提示</cover-view><cover-view class="modal-content">请授权相机照相功效</cover-view><cover-view class="modal-footer"><cover-view class="btn-cancel">取消</cover-view><button open-type="openSetting" class="btn-confirm button-on-view" style="padding:0rpx;height: 45px;">设置</button></cover-view></cover-view></cover-view><!-- 授权提示设置 end --><canvas canvas-id='attendCanvasId' class='myCanvas'></canvas></view></template>说明:由于图片压缩接纳的canvas绘制的,所以要有canvas的承载容器,这个canvas标签不能隐藏,否则压缩会失败,为了不影响页面,可以通过定位将canvas移动到屏幕的远处去,canvas的长宽设置为照相需求的图片巨细,不设置最终图片会被缩放,我这里要求是width:300px;height:190px。

yobo体育app官网入口

2)、样式文件:<style scoped> /*页面容器*/.photo-idcard {height: 100%;width: 100%;overflow: auto;background: rgba(0, 0, 0, 0.6);} /* 相机样式*/ .camera-box { width: 600upx; height: 380upx; margin: 200upx auto 0 auto; border-radius: 10upx !important; border:1px solid #fff; } /*提示语句*/ .notice { color: #fff; margin-top: 40upx; box-sizing: border-box; box-sizing: border-box; display: flex; align-items: center; justify-content: center; } /*拍摄按钮*/ .photo-btn { width: 672upx; height: 94upx; background: rgba(36, 115, 246, 1); border-radius: 48upx; color: #fff; margin-top: 40upx; box-sizing: border-box; } /* 授权提示弹窗 */ .modal-mask { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); overflow: hidden; z-index: 9999; display: flex; align-items: center; justify-content: center; } .modal-dialog { width: 540rpx; overflow: hidden; z-index: 9999; background: #f9f9f9; border-radius: 5rpx; } .modal-title { padding-top: 30rpx; font-size: 32rpx; color: #030303; text-align: center; } .modal-content { padding: 20rpx 32rpx; font-size: 28rpx; } .modal-footer { display: flex; flex-direction: row; height: 86rpx; border-top: 1px solid #dedede; font-size: 34rpx; line-height: 86rpx; } .btn-cancel { width: 50%; color: #abb4bd; border-right: 1px solid #dedede; display: flex; align-items: center; justify-content: center; height: 45px; line-height: 45px; text-align: center; } .btn-confirm { width: 50%; color: #6fb64b; text-align: center; font-weight: 500; height: 45px; } /*图片压缩时的承载画布样式*/ .myCanvas { position: absolute; left: 9999px; top: 0; width: 600upx; height: 380upx; } </style>3)、js文件:<script>export default {data() {return {src: "",postionType: "back",middle: false}},methods: {/** * @author PYD * @description 切换拍摄镜头 */changeCamareType() {if (this.postionType === 'back') {this.postionType = 'front';return;}if (this.postionType === 'front') {this.postionType = 'back';}},/** * @author PYD * @description 开始拍摄 */takePhoto() {let that = this;wx.getSetting({ // 判断是否举行相机授权,没有则拉起弹窗success: (res) => {if (!res.authSetting['scope.camera']) {that.middle = true;} else {this.middle = false;}}})const ctx = uni.createCameraContext(); // 建立相机上下文ctx.takePhoto({ // 开始拍摄quality: 'high',success: (res) => {that.getCanvasImg(0, 0, res);}});}, /** * @author PYD * @description 压缩并获取图片 */getCanvasImg: function(index, failNum, photoData) {var that = this;const ctx = uni.createCanvasContext('attendCanvasId');ctx.drawImage(photoData.tempImagePath, 0, 0, photoData.width, photoData.height,0,0,300, 190); // 接纳canvas举行绘制ctx.draw(true, function() {uni.canvasToTempFilePath({canvasId: 'attendCanvasId',success: function success(res) {that.src = res.tempFilePath;uni.setStorageSync('idcard', res.tempFilePath);uni.redirectTo({url: '/pages/uploadIdcard/uploadIdcard'})},fail: function(e) {uni.showToast({icon: "none",mask: true,duration: 1000,title: "压缩图片失败!"});}});});}}}</script>说明:照相开始时,先去判断有没有授权,没有授权相机,要调起授权弹窗,照相完成后立刻压缩图片;注意此方法压缩时,如果没有设置好对应的参数,图片会泛起缩放,参数寄义请查阅api。ctx.drawImage(photoData.tempImagePath, 0, 0, photoData.width, photoData.height,0,0,300, 190);至此这个功效就开发竣事了!希望对您有所资助!。


本文关键词:yobo体育app官网入口,yobo,体育,官网,下载,全站,app,微信,小,法式

本文来源:yobo体育app官网入口-www.webbing8.com

 


产品咨询

留言框

  • 产品:

  • 留言内容:

  • 您的单位:

  • 您的姓名:

  • 联系电话:

  • 常用邮箱:

  • 详细地址:


推荐产品

Copyright © 2006-2022 www.webbing8.com. yobo体育app官网入口科技 版权所有 备案号:ICP备47671000号-7

在线客服 联系方式 二维码

服务热线

0259-191977355

扫一扫,关注我们