uniapp 微信小程序 - 调起手机摄像头: 拍摄身份证的正反面，自定义身份证取景框，在相机上绘制 “身份证轮廓“ 与提示文字（超详细示例源码，一键复制运行开箱即用）

已于 2024-05-10 10:00:35 修改
阅读量6.9k 收藏 15
点赞数 4
分类专栏： 前端组件与功能(开箱即用) 文章标签： 微信小程序 uni-app 自定义相机辅助线 身份证取景框 uniapp人脸取景辅助线轮廓
于 2023-05-05 21:02:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/130514691
版权

效果图

这个需求很难在网上找到，就算找到都是很乱的代码。。

本篇博客实现了在uniapp项目中，微信小程序平台下调起手机相机照身份证功能，在相机上添加辅助框、自定义文案或图片（给相机加上身份证辅助线的轮廓），并且解决了 “拒绝相机默认授权后，无法再次拉起相机授权” 问题，你可以自由更改样式，比如改成 “人脸取景框” 等！

uniapp Vue3和Vue2都能用，提供详细示例运行代码，新手小白直接复制稍微改下就能使用。

在这里插入图片描述 在这里插入图片描述

准备开始

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
  • 4
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
专栏目录
订阅专栏
微信小程序 - 详细实现调起摄像头拍摄照片并获取照片路径，在拍照相机上增加身份证证件照的轮廓，支持自定义拍摄辅助线图片或文字现实，可用于拍摄身份证 / 人像（详细示例源代码，一键复制运行即可）
王佳斌
08-16 5946
微信小程序，身份证证件照片，拍照轮廓图片自定义，拍照辅助线，小程序开发如何加入辅助线，怎么往相机里放上自定义图片，小程序微信小程序自定义相机 ，给相机添加辅助框，自定义引导框拍照，实现小程序身份证取景框，小程序人脸face框人脸轮廓拍照上传，微信小程序拉起摄像头自定义拍摄界面样式，拍照增加取景框+返回上一页并触发事件，调起手机摄像头: 拍摄身份证的正反面，自定义身份证取景框，在相机上绘制 “身份证轮廓“ 与提示文字（超详细示例源码，一键复制运行开箱即用）
微信小程序实现自定义拍摄组件实现
sx_lz_1119的博客
08-03 1224
微信小程序实现自定义摄像头
uni-app实现小程序身份证取景框
weixin_43737733的博客
01-18 3131
uni-app实现小程序身份证取景框
微信小程序实现身份证取景框拍摄
01-19
本文实例为大家分享了微信小程序实现身份证取景框拍摄的具体代码，供大家参考，具体内容如下 wxml </cove
uniapp 微信小程序自定义相机实现ocr识别、拍摄图片增加取景框功能
m0_52685922的博客
05-10 290
【代码】uniapp 微信小程序自定义相机实现ocr识别、拍摄图片增加取景框功能。
uni小程序-人脸采集、人脸检测功能
Liheishuai的博客
11-03 1854
逻辑就是先调起摄像头，获取到实时帧数据之后，使用wx.faceDetect进行人脸检测，检测到正面的人脸就可以拍照上传给后端了。适用于人脸采集，人脸检测等功能。
微信小程序 用canvas截取身份证区域 we-cropper
吕小仙的欧巴的博客
03-16 1324
微信小程序拍照页面需要做成这个样子。评估了一下需求发现可以做。那么开整。 下载WeCropper 先把项目克隆下来 git clone https://github.com/we-plugin/we-cropper.git 然后复制出来example里面的we-cropper文件夹到你的项目里 wxml <view class="camera_box"> <camera class="camera" wx:if="{{!show}}" device-position="back" f
【camera】uniapp小程序实现取景框拍摄（拍照时屏幕有引导内容）
m0_71621983的博客
11-04 1375
uniapp实现微信小程序拍摄取景框图片引导
Uniapp实现证件照提示框模板（小程序+APP）
qq_36656155的博客
11-11 6110
先上效果图 这是小程序上的表现： 这是ios app上的表现： 分析：看到这个需求，我们第一反应是使用uniapp上的camera组件，然后在用cover-image添加一个图片就可以达到要求。但是camera组件有兼容性的问题，它不支持app端。于是参考别人的写法，看到有一个live-pusher直播流组件，用nvue写就可以兼容app。 技术拆分： 1.小程序端使用camera组件。页面内嵌的区域相机组件。注意这不是点击后全屏打开的相机。 2.App端使用直播推流 live-pushe.
小程序实现身份证取景框拍摄
科技男
11-27 9336
身份证取景框的实现主要是借助于camera 组件及cover-view组件 先看下案例 wxml代码 <view class="camera_box"> <camera class="camera" wx:if="{{!show}}" device-position="back" flash="off" binderror="error"> <cover...
uniapp在微信小程序端调用摄像头拍照并且把拍下的图片上传到后端
m0_66809099的博客
03-29 2028
需要注意的是我在代码片段中用到 _this,因为我怕函数改变了this的指向所有我在方法的开头就写了。
一个身份证校验的小程序
03-03
可以进行改良的身份证校验小程序。平时可以看看！
微信小程序：调起摄像头拍照并在页面预览图片.zip
05-06
微信小程序：调起摄像头拍照并在页面预览图片 微信小程序：调起摄像头拍照并在页面预览图片 微信小程序：调起摄像头拍照并在页面预览图片 微信小程序：调起摄像头拍照并在页面预览图片 微信小程序：调起...
uniapp 微信小程序tabbar凸起的显示
08-25
在开发微信小程序时，UI设计和用户体验是至关重要的部分，特别是在构建导航栏（tabbar）时。`uniapp`是一个跨平台的开发框架，它允许开发者使用一套代码库来构建多端应用，包括微信小程序。在`uniapp`中处理微信小...
uniapp - 微信小程序 - 自定义底部tabbar
最新发布
06-26
在开发微信小程序或基于uniapp框架的应用时，自定义底部tabbar是一项常见的需求。底部tabbar作为用户界面的重要组成部分，通常包含多个图标和文字，用于切换不同的页面或功能区域。本篇文章将深入探讨如何在uniapp中...
uniapp开发微信小程序-人脸采集功能
05-16
uniapp开发微信小程序-人脸采集功能
微信小程序身份证取景框拍摄demo
qq_43447509的博客
08-26 2454
wxml <view class="camera_box"> <camera class="camera" wx:if="{{!show}}" device-position="back" flash="off" binderror="error"> <cover-view class="id_m"> <cover-image class="img" src="https://cdn.ctoku.com/201910234221235312.
小程序实现身份证取景框拍摄-uniapp版
ur home
01-26 7587
此篇幅主要介绍，关于身份证取景框拍照，如何实现及实现代码，其他的银行卡取景框等等一些证件就可以照猫画虎了，使用到的组件有camera、cover-view、cover-image 期望结果 实现逻辑 首先是当做一个页面而不是组件，需要在pages.json中注册（作为组件时有各种坑，目前还没爬出来） 接下来就是要劳烦UI小姐姐的地方了，作图和切图 最后就是处理对拍出来的照片进行旋转展示了（style="{transform:rotateZ(270deg)}"） 具体代码如下 &...
微信小程序身份证显示取景框
05-26
微信小程序身份证显示取景框可以通过调用微信小程序的Camera组件实现。具体实现步骤如下： 1. 在wxml文件中添加Camera组件，并设置binderror、bindscancode、bindstop、resolution等属性。 ``` <camera wx:if="{{camera}}" device-position="{{cameraDirection}}" flash="{{flash}}" binderror="error" bindscancode="scanCode" bindstop="stop" resolution="{{resolution}}" style="width: 100%; height: 100%" /> ``` 2. 在js文件中获取Camera组件实例，并设置自定义取景框。 ``` const ctx = wx.createCameraContext() ctx.setScanRect({ x: 0, y: 0, width: 500, height: 300 }) ``` 3. 在wxss文件中设置取景框样式。 ``` .camera { position: relative; width: 100%; height: 100%; } .camera::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 500rpx; height: 300rpx; border: 2rpx dashed #fff; box-sizing: border-box; } ``` 通过以上步骤，就可以在微信小程序中实现身份证显示取景框的功能了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值