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

已于 2025-01-16 15:23:48 修改
阅读量8.8k 收藏 27
点赞数 5
CC 4.0 BY-SA版权
分类专栏： 前端组件与功能(开箱即用) uniapp组件与功能(工作经验) uniapp常见问题解决 文章标签： 微信小程序 uni-app 自定义相机辅助线 身份证取景框 uniapp人脸取景辅助线轮廓
于 2023-05-05 21:02:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/130514691
本博客详述如何在uniapp中为微信小程序实现自定义相机功能，特别是拍摄身份证时添加身份证轮廓和提示文字的辅助线。内容包括使用camera组件、cover-view和cover-image添加辅助边框，解决相机权限问题，以及提供完整可运行的源码示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

效果图

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

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

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

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

准备开始

了解本专栏 订阅专栏 解锁全文
微信小程序 - 详细实现调起摄像头拍摄照片并获取照片路径，在拍照相机上增加身份证证件照的轮廓，支持自定义拍摄辅助线图片或文字现实，可用于拍摄身份证 / 人像（详细示例源代码，一键复制运行即可）
资深程序员
08-16 6542
微信小程序，身份证证件照片，拍照轮廓图片自定义，拍照辅助线，小程序开发如何加入辅助线，怎么往相机里放上自定义图片，小程序微信小程序自定义相机，给相机添加辅助框，自定义引导框拍照，实现小程序身份证取景框，小程序人脸face框人脸轮廓拍照上传，微信小程序拉起摄像头自定义拍摄界面样式，拍照增加取景框+返回上一页并触发事件，调起手机摄像头:拍摄身份证的正反面，自定义身份证取景框，在相机上绘制“身份证轮廓“与提示文字（超详细示例源码，一键复制运行开箱即用）微信小程序，调起手机摄像头:拍摄身份证的正反面，调起
uniapp [安卓苹果App端] - 实现获取手机摄像头权限+调用相机拍照或拍视频+保存图片视频到相册，检测权限手机摄像头功能是否开启并引导用户同意授权，uniApp app端调用本机开启摄像头授权
资深程序员
05-05 9940
uni-app，权限，手机摄像头权限，安卓Android，苹果ios，uniapp安卓android获取本机摄像头权限使用，uni-app获取摄像头并实现拍照片功能 uniapp苹果IOS系统不支持怎么办，判断权限，权限被拒绝了怎么办，获取摄像头权限报错，打开相机拍照，录视频并保存到相册中，UniApp调用相机进行拍照，拍照上传保存在手机本地相册，打包上架后如何获取，安卓ios权限检测，安卓和ios权限获取，uniapp的APP端录制视频保存本地并读取视频，如何开启摄像头权限，摄像头的开启和关闭，判断权限检
微信小程序实现身份证取景框拍摄
10-14
主要介绍了微信小程序实现身份证取景框拍摄，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
uni-app调用摄像头扫码功能示例（支持前置和后置摄像头）
03-07
uni-app调用摄像头扫码功能示例，拿来即用；
uniapp实现调用相机扫码功能
最新发布
810cheng
06-14 668
在 UniApp 中实现调用相机进行扫码的功能，你可以使用 UniApp 的 uni.scanCode API 来实现。这是一个非常简便的方法，可以让用户通过手机的摄像头进行扫码。
小程序实现身份证取景框拍摄
科技男
11-27 9869
身份证取景框的实现主要是借助于camera 组件及cover-view组件 先看下案例 wxml代码 <view class="camera_box"> <camera class="camera" wx:if="{{!show}}" device-position="back" flash="off" binderror="error"> <cover...
uniapp写微信小程序实现识别身份证照片功能
weixin_57031986的博客
11-22 1343
uniapp写微信小程序实现识别身份证照片功能
uniapp 小程序 身份证 和人脸视频拍摄
weixin_53105591的博客
11-13 1891
开发背景：客户需要使用带有拍摄边框的摄像头 ，微信小程序的方法无法支持，使用camera修改。
小程序生命周期
L289121的博客
10-05 168
可参考：https://www.cnblogs.com/fozero/p/7868560.html onLaunch : function () { // 生命周期函数--监听初始化（全局只触发一次） onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: f
uniapp调用相机
lonelyal的博客
10-31 1673
uniapp调用相机拍视频
uniapp开发微信小程序调用摄像头拍照
2301_78538700的博客
01-02 1817
camera摄像头视口。
uni-app 小程序中身份证上传图片，自定义身份证取景框
luhanglh的博客
10-12 2290
在小程序实人认证的时候需要上传身份证的正反面，为了让限制拍摄区域，我们要实现拍照时，身份证的取景框。完成辅助定位的作用。
CameraApp摄像头调用和设备
05-24
调用摄像头，摄像头设备信息获取，写json文档，自己写的案例
小程序实现身份证取景框拍摄-uniapp版
ur home
01-26 8533
此篇幅主要介绍，关于身份证取景框拍照，如何实现及实现代码，其他的银行卡取景框等等一些证件就可以照猫画虎了，使用到的组件有camera、cover-view、cover-image 期望结果 实现逻辑 首先是当做一个页面而不是组件，需要在pages.json中注册（作为组件时有各种坑，目前还没爬出来） 接下来就是要劳烦UI小姐姐的地方了，作图和切图 最后就是处理对拍出来的照片进行旋转展示了（style="{transform:rotateZ(270deg)}"） 具体代码如下 &...
微信小程序实现身份证拍摄
Mr. Wu's blog
08-12 1045
微信小程序自定义页面拍摄身份证
uniapp开发微信小程序 -- 调用摄像头
努力的nana
04-11 1290
{
微信小程序之身份证照片正反上传
lqlq54321的博客
06-29 7533
身份证正反照片上传识别信息，将身份证以及信息展示到页面
新接触功能之uniApp（H5）打开摄像头、拍照、切换摄像头、下载照片功能
qq_45292320的博客
04-09 7373
navigator.mediaDevices.getUserMedia(constraints)获取到视频流，然后将视频流挂载到video标签上。：将视频流通过canvas.drawImage（）画到canvas上，再利用toDataURL（）创建url，挂在到img标签上显示。2) 通过navigator.mediaDevices.getUserMedia(constraints)获取并挂载上。将blob类型的图片挂在到a标签的href上，通过a标签的download下载。：改变facingMode。
uniapp 生成H5调用摄像头识别二维码
qtianyuq的博客
11-15 7622
移动端在浏览器中调用手机摄像头进行扫码，无须任何sdk，支持市面上绝大部分手机。在安卓系统上可以打开闪光灯
微信小程序身份证信息识别技术实现与源代码分析
在技术实现上，开发者可能使用了微信小程序提供的图形界面组件和网络通信能力，通过调用微信小程序开放平台的API接口与OCR服务进行交互。这涉及到对小程序权限的申请、图片上传、OCR服务的调用、结果的接收和处理等...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

十一猫咪爱养鱼

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

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

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

打赏作者

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

抵扣说明：

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

余额充值