devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

APP自定义身份证相机(Android +iOS)_vue 拍摄身份证组件

作者：繁依Fanyi0 | 2024-06-06 23:29:14

赞

踩

vue 拍摄身份证组件

基本上同时兼容安卓和苹果的插件都需要付费，这里我找了2个好用的免费插件

1.仅支持安卓：自定义身份证相机（支持蒙版自定义），内置蒙版，照片预览，身份证裁剪 - DCloud 插件市场、

2.支持iOS(已测)，支持Android(未测，应该也可以用):

 自定义相机 - DCloud 插件市场

第一个插件使用方法(仅支持安卓)：

创建一个realName.vue文件

  1. <view class="personalInfo" style="margin-top: 20rpx;">
  2.         <view class="label" style="margin-bottom: 8rpx;">
  3.             <view class="blue"></view>
  4.             <view class="title">证件图片</view>
  5.         </view>
  6.         <view class="tips">请拍摄或上传身份证原件照片，确保照片完整清晰</view>
  7.         <view class="imgBox">
  8.             <view class="front">
  9.                 <image :src="frontImg" :class="platform == 'ios' ? 'transformImg' : ''" @click="uploadImgNew('front')"/>
  10.                 <view class="frontBtn" @click="uploadImgNew('front')" v-if="frontImg == ''">
  11.                     上传人像面
  12.                 </view>
  13.             </view>
  14.             <view class="back">
  15.                 <image :src="backImg" :class="platform == 'ios' ? 'transformImg' : ''" @click="uploadImgNew('back')"/>
  16.                 <view class="backBtn" @click="uploadImgNew('back')" v-if="backImg == ''">
  17.                     上传国徽面
  18.                 </view>
  19.             </view>
  20.         </view>
  21.     </view>
  1. export default {
  2.   data () {
  3.     return {
  4.         frontImg: '',
  5.         backImg: '',
  6. 		canvasSiz:{
  7. 			width:188,
  8. 			height:273
  9. 		},
  10.         flag: true
  11.     }
  12.   },
  1. methods:{
  2.     uploadImgNew(types){
  3.         console.log('打开相机');
  4.         let platform = uni.getSystemInfoSync().platform
  5.         if(!this.flag){
  6.             uni.showToast({
  7.                 title: '图片正在上传中,请误做其他操作', 
  8.                 icon: 'none'
  9.             })
  10.             return
  11.         }
  12.         if(platform == 'ios'){
  13.             // ios的另外用了别的插件，下面会讲到
  14.             uni.navigateTo({
  15.                 url: `./idcard?dotype=${types == 'front' ? 'face' : 'badge'}`
  16.             })
  17.         }else{
  18.             var cameraModule = uni.requireNativePlugin('yun-camerax-module');
  19.             //无需蒙版可将type设置为非参数值，例如 type：99
  20.             cameraModule.takePhoto({ 
  21.                 type: types == 'front' ? 0 : 1, 
  22.                 imageIndex: 2, fullSrc: true,
  23.                 text: types == 'front' ? '将身份证正面置于此区域内并对齐边缘' : '将身份证背面置于此区域内并对齐边缘'
  24.             }, res => {
  25.                 console.log(res);
  26.                 uni.showModal({
  27.                     title: '提示',
  28.                     // content: JSON.stringify(res),
  29.                     content: '请再次确认使用该图',
  30.                     success: (res1) => {
  31.                         if (res1.confirm) {
  32.                             console.log('用户点击确定',res);
  33.                             this.upLoadImg(res.file,types)
  34.                         } else if (res1.cancel) {
  35.                             console.log('用户点击取消');
  36.                         }
  37.                     }
  38.                 });
  39.             });
  40.         }
  41.     },
  42.     async upLoadImg(path,type) {
  43.       setTimeout(()=>{
  44.         uni.showToast({
  45.               title: '上传中',
  46.               icon: 'none'
  47.         })
  48.         this.flag = false
  49.         uni.uploadFile({
  50.           url: 'xxxxxx/upload', //后端上传接口
  51.           filePath: path,
  52.           name: "file",
  53.           success: (res) => {
  54.             console.log('res222',res);
  55.             if(JSON.parse(res.data).code == 0){
  56.                 console.log('JSON.parse(res.data)',JSON.parse(res.data));
  57.                 if(type == 'front'){
  58.                     this.frontImg = JSON.parse(res.data).data.rel_path
  59.                     this.$forceUpdate()
  60.                 }else{
  61.                     this.backImg = JSON.parse(res.data).data.rel_path
  62.                     this.$forceUpdate()
  63.                 }
  64.                 this.flag = true   
  65.             }else{
  66.               uni.showToast({
  67.                   title: JSON.parse(res.data).msg,
  68.                   icon: 'none'
  69.               })
  70.             }
  71.               
  72.           },
  73.           fail(e) {
  74.             this.showTip("上传图片失败");
  75.           },
  76.         });
  77.       },300)
  78.     },

第二个插件使用方法：

需要用到live-pusher直播推流，在manifest.json中勾选，真机调试需要重新打自定义基座再重新运行

为了防止样式兼容问题，另外需配置如下：

在同级目录下创建idcard.nvue文件

然后把下面代码整个copy进去

  1. <template>
  2. 	<view class="live-camera" :style="{ width: windowWidth, height: windowHeight }">
  3. 		<view class="preview" :style="{ width: windowWidth, height: windowHeight - 65 }">
  4. 			<live-pusher
  5. 				id="livePusher"
  6. 				ref="livePusher"
  7. 				class="livePusher"
  8. 				mode="FHD"
  9. 				beauty="0"
  10. 				whiteness="0"
  11. 				:aspect="aspect"
  12. 				min-bitrate="1000"
  13. 				audio-quality="16KHz"
  14. 				:device-position="back"
  15. 				:auto-focus="true"
  16. 				:muted="true"
  17. 				:enable-camera="true"
  18. 				:enable-mic="false"
  19. 				:zoom="false"
  20. 				@statechange="statechange"
  21. 				:style="{ width: cameraWidth, height: cameraHeight }"
  22. 			></live-pusher>
  23.  
  24. 			<!--提示语-->
  25. 			<cover-view class="remind">
  26. 				<text class="remind-text" style="">{{ message }}</text>
  27. 			</cover-view>
  28.  
  29. 			<!--辅助线-->
  30. 			<cover-view class="outline-box" :style="{ width: windowWidth, height: windowHeight - 80}">
  31. 				<cover-image
  32. 					class="outline-img"
  33. 					:src="dotype == 'face' ? '/static/live-camera/outline/idcardface.png' : '/static/live-camera/outline/idcardbadge.png'"
  34. 					style=""
  35. 				></cover-image>
  36. 			</cover-view>
  37. 		</view>
  38.  
  39. 		<view class="menu">
  40. 			<!--底部菜单区域背景-->
  41. 			<cover-image class="menu-mask" src="/static/live-camera/bar.png"></cover-image>
  42.  
  43. 			<!--返回键-->
  44. 			<cover-image class="menu-back" @tap="back" src="/static/live-camera/back.png"></cover-image>
  45.  
  46. 			<!--快门键-->
  47. 			<cover-image class="menu-snapshot" @tap="snapshot" src="/static/live-camera/shutter.png"></cover-image>
  48.  
  49. 			<!--反转键-->
  50. 			<cover-image class="menu-flip" @tap="flip" src="/static/live-camera/flip.png"></cover-image>
  51. 		</view>
  52. 	</view>
  53. </template>
  54.  
  55. <script>
  56. let _this = null;
  57. export default {
  58. 	data() {
  59. 		return {
  60. 			poenCarmeInterval: null, //打开相机的轮询
  61. 			dotype: 'face', //操作类型
  62. 			message: '', //提示
  63. 			aspect: '2:3', //比例
  64. 			cameraWidth: '', //相机画面宽度
  65. 			cameraHeight: '', //相机画面宽度
  66. 			windowWidth: '', //屏幕可用宽度
  67. 			windowHeight: '', //屏幕可用高度
  68. 			camerastate: false, //相机准备好了
  69. 			livePusher: null, //流视频对象
  70. 			snapshotsrc: null //快照
  71. 		};
  72. 	},
  73. 	onLoad(e) {
  74. 		console.log('e',e);
  75. 		_this = this;
  76. 		this.dotype = e.dotype;
  77. 		this.initCamera();
  78. 	},
  79. 	onReady() {
  80. 		uni.showToast({
  81. 			title: '相机加载中...',
  82. 			icon: 'none',
  83. 			duration: 800
  84. 		})
  85. 		this.livePusher = uni.createLivePusherContext('livePusher', this);
  86. 		console.log('this.livePusher',this.livePusher);
  87. 		this.startPreview(); //开启预览并设置摄像头
  88. 		this.poenCarme();
  89. 	},
  90. 	methods: {
  91. 		//轮询打开
  92. 		poenCarme() {
  93. 			//#ifdef APP-PLUS
  94. 			if (plus.os.name == 'Android') {
  95. 				console.log('111');
  96. 				this.poenCarmeInterval = setInterval(function() {
  97. 					console.log(_this.camerastate);
  98. 					if (!_this.camerastate) _this.startPreview();
  99. 				}, 2500);
  100. 			}else{
  101. 				console.log('2222');
  102. 			}
  103. 			//#endif
  104. 		},
  105. 		//初始化相机
  106. 		initCamera() {
  107. 			//处理安卓手机异步授权问题
  108. 			uni.getSystemInfo({
  109. 				success: (res) => {
  110. 					console.log('resxxxx',res);
  111. 					this.windowWidth = res.windowWidth;
  112. 					this.windowHeight = res.windowHeight;
  113. 					this.cameraWidth = res.windowWidth;
  114. 					this.cameraHeight = res.windowWidth * 1.5;
  115. 				}
  116. 			});
  117. 		},
  118.  
  119. 		//开始预览
  120. 		startPreview() {
  121. 			console.log('执行开始预览');
  122. 			this.livePusher.startPreview({
  123. 				success: (a) => {
  124. 					console.log('aaa',a);
  125. 				}
  126. 			});
  127. 		},
  128.  
  129. 		//停止预览
  130. 		stopPreview() {
  131. 			this.livePusher.stopPreview({
  132. 				success: a => {
  133. 					console.log('停止预览',a);
  134. 					this.camerastate = false; //标记相机未启动
  135. 				}
  136. 			});
  137. 		},
  138.  
  139. 		//状态
  140. 		statechange(e) {
  141. 			//状态改变
  142. 			console.log(e);
  143. 			if (e.detail.code == 1007) {
  144. 				_this.camerastate = true;
  145. 			} else if (e.detail.code == -1301) {
  146. 				_this.camerastate = false;
  147. 			}
  148. 		},
  149.  
  150. 		//返回
  151. 		back() {
  152. 			uni.navigateBack();
  153. 		},
  154.  
  155. 		//抓拍
  156. 		snapshot() {
  157. 			this.livePusher.snapshot({
  158. 				success: e => {
  159. 					console.log('快门',e);
  160. 					this.snapshotsrc = e.message.tempImagePath;
  161. 					this.stopPreview();
  162. 					this.setImage();
  163. 					uni.navigateBack();
  164. 				}
  165. 			});
  166. 		},
  167.  
  168. 		//反转
  169. 		flip() {
  170. 			this.livePusher.switchCamera();
  171. 		},
  172.  
  173. 		//设置
  174. 		setImage() {
  175. 			let pages = getCurrentPages();
  176. 			let prevPage = pages[pages.length - 2]; //上一个页面
  177.  
  178. 			//直接调用上一个页面的setImage()方法，把数据存到上一个页面中去
  179. 			prevPage.$vm.setImage({ path: this.snapshotsrc, dotype: this.dotype });
  180. 		}
  181. 	}
  182. };
  183. </script>
  184.  
  185. <style lang="scss">
  186.  
  187. .live-camera {
  188. 	.preview {
  189. 		justify-content: center;
  190. 		align-items: center;
  191. 		.outline-box {
  192. 			position: absolute;
  193. 			top: 0;
  194. 			left: 0;
  195. 			bottom: 0;
  196. 			z-index: 99;
  197. 			align-items: center;
  198. 			justify-content: center;
  199. 			.outline-img {
  200. 				width: 750rpx;
  201. 				height: 1125rpx;
  202. 			}
  203. 		}
  204. 		.remind {
  205. 			position: absolute;
  206. 			top: 880rpx;
  207. 			width: 750rpx;
  208. 			z-index: 100;
  209. 			align-items: center;
  210. 			justify-content: center;
  211. 			.remind-text {
  212. 				color: #dddddd;
  213. 				font-weight: bold;
  214. 			}
  215. 		}
  216. 	}
  217. 	.menu {
  218. 		position: absolute;
  219. 		left: 0;
  220. 		bottom: 0;
  221. 		width: 750rpx;
  222. 		height: 180rpx;
  223. 		z-index: 98;
  224. 		align-items: center;
  225. 		justify-content: center;
  226. 		.menu-mask {
  227. 			position: absolute;
  228. 			left: 0;
  229. 			bottom: 0;
  230. 			width: 750rpx;
  231. 			height: 180rpx;
  232. 			z-index: 98;
  233. 		}
  234. 		.menu-back {
  235. 			position: absolute;
  236. 			left: 30rpx;
  237. 			bottom: 50rpx;
  238. 			width: 80rpx;
  239. 			height: 80rpx;
  240. 			z-index: 99;
  241. 			align-items: center;
  242. 			justify-content: center;
  243. 		}
  244. 		.menu-snapshot {
  245. 			width: 130rpx;
  246. 			height: 130rpx;
  247. 			z-index: 99;
  248. 		}
  249. 		.menu-flip {
  250. 			position: absolute;
  251. 			right: 30rpx;
  252. 			bottom: 50rpx;
  253. 			width: 80rpx;
  254. 			height: 80rpx;
  255. 			z-index: 99;
  256. 			align-items: center;
  257. 			justify-content: center;
  258. 		}
  259. 	}
  260. }
  261.  
  262. </style>

因为第一次使用nvue，代码整个都成灰色，需要在vscode设置中按下图配置，代码就会和.vue文件一样变彩色，方便阅读

在realName.vue文件中加入：

<canvas id="canvas-clipper" canvas-id="canvas-clipper" type="2d" :style="{width: canvasSiz.width+'px',height: canvasSiz.height+'px',position: 'absolute',left:'-500000px',top: '-500000px'}" />

这里用到canvas是为了把live-pusher横屏拍摄的身份证裁剪

  1. methods:{
  2.     //设置图片
  3. 	setImage(e) {
  4. 		console.log('跳回这个页面',e);
  5.         let type = e.dotype == 'face' ? 'front' : 'back'
  6. 		//显示在页面
  7.         console.log('type',type);
  8.         // this.upLoadImg(e.path,type)
  9.         this.zjzClipper(e.path,type)
  10. 	},
  11.     //证件照裁切
  12. 	zjzClipper(path,type) {
  13. 		uni.getImageInfo({
  14. 			src: path,
  15. 			success: (image) => {
  16. 				console.log('image',image);
  17. 				this.canvasSiz.width =188;
  18. 				this.canvasSiz.height =273;
  19. 				
  20. 				
  21. 				//因为nvue页面使用canvas比较麻烦，所以在此页面上处理图片
  22. 				let ctx = uni.createCanvasContext('canvas-clipper', this);
  23. 				
  24. 				ctx.drawImage(
  25. 					path,
  26. 					parseInt(0.15 * image.width),
  27. 					parseInt(0.17 * image.height),
  28. 					parseInt(0.69 * image.width),
  29. 					parseInt(0.65 * image.height),
  30. 					0,
  31. 					0,
  32. 					188,
  33. 					273
  34. 				);
  35. 				
  36. 				ctx.draw(false, () => {
  37. 					uni.canvasToTempFilePath(
  38. 						{
  39. 							destWidth: 188,
  40. 							destHeight: 273,
  41. 							canvasId: 'canvas-clipper',
  42. 							fileType: 'jpg',
  43. 							success: (res) => {
  44. 								// this.savePhoto(res.tempFilePath);
  45.                                 // this.frontImg = res.tempFilePath
  46.                                 this.upLoadImg(res.tempFilePath,type)
  47. 							}
  48. 						},
  49. 						this
  50. 					);
  51. 				});
  52. 			}
  53. 		});
  54. 	},

如果想保存拍摄的照片还可以使用下面方法

  1. savePhoto(path){
  2. 		this.imagesrc = path;
  3. 		//保存到相册
  4. 		uni.saveImageToPhotosAlbum({
  5. 			filePath: path,
  6. 			success: () => {
  7. 				uni.showToast({
  8. 					title: '已保存至相册',
  9. 					duration: 2000
  10. 				});
  11. 			}
  12. 		});
  13. 	},

realName.vue的css样式部分

  1. .personalInfo{
  2.         padding: 27rpx 30rpx;
  3.         box-sizing: border-box;
  4.         background-color: #fff;
  5.         .label{
  6.             display: flex;
  7.             align-items: center;
  8.             margin-bottom: 50rpx;
  9.             .blue{
  10.                 width: 8rpx;
  11.                 height: 30rpx;
  12.                 background-color: #3E71FE;
  13.                 margin-right: 12rpx;
  14.             }
  15.             .title{
  16.                 font-weight: 500;
  17.                 font-size: 32rpx;
  18.                 color: #1D1B1A;
  19.             }
  20.         }
  21.         .realName{
  22.             display: flex;
  23.             align-items: center;
  24.             margin-bottom: 30rpx;
  25.             padding-left: 20rpx;
  26.             box-sizing: border-box;
  27.             .name{
  28.                 font-weight: 500;
  29.                 font-size: 28rpx;
  30.                 color: #1D1B1A;
  31.             }
  32.         }
  33.         .tips{
  34.             font-weight: normal;
  35.             font-size: 24rpx;
  36.             color: #929292;
  37.             margin-bottom: 30rpx;
  38.         }
  39.         .lineBottom{
  40.             width: 650rpx;
  41.             height: 2rpx;
  42.             background: #F5F5F5;
  43.             margin: auto;
  44.             margin-bottom: 30rpx;
  45.         }
  46.         .imgBox{
  47.             display: flex;
  48.             flex-direction: column;
  49.             justify-content: space-between;
  50.             padding: 0 82rpx;
  51.             box-sizing: border-box;
  52.             .front{
  53.                 position: relative;
  54.                 width: 526rpx;
  55.                 height: 288rpx;
  56.                 border-radius: 20rpx 20rpx 20rpx 20rpx;
  57.                 margin-bottom: 28rpx;
  58.                 background: url('https://res.qyjpay.cn/static/res/yewuban-smrz-zhengmian.png') no-repeat center;
  59.                 background-size: contain;
  60.                 .frontBtn{
  61.                     position: absolute;
  62.                     bottom: 50rpx;
  63.                     left: 123rpx;
  64.                     width: 280rpx;
  65.                     height: 90rpx;
  66.                     line-height: 90rpx;
  67.                     background: #3E71FE;
  68.                     box-shadow: 0rpx 8rpx 12rpx 1rpx rgba(62,113,254,0.15);
  69.                     border-radius: 45rpx 45rpx 45rpx 45rpx;
  70.                     font-size: 32rpx;
  71.                     color: #FFFFFF;
  72.                     font-weight: normal;
  73.                     text-align: center;
  74.                 }
  75.                 image{
  76.                     position: absolute;
  77.                     left: 0;
  78.                     top: 0;
  79.                     width: 526rpx;
  80.                     height: 288rpx;
  81.                     border-radius: 20rpx 20rpx 20rpx 20rpx;
  82.                 }
  83.             }
  84.             .transformImg{
  85.                 position: absolute;
  86.                 left: 120rpx !important;
  87.                 top: -120rpx !important;
  88.                 transform: rotate(-90deg);
  89.                 width: 288rpx !important;
  90.                 height: 526rpx !important;
  91.                 z-index: 999;
  92.             }
  93.             .back{
  94.                 position: relative;
  95.                 width: 526rpx;
  96.                 height: 288rpx;
  97.                 border-radius: 20rpx 20rpx 20rpx 20rpx;
  98.                 background: url('https://res.qyjpay.cn/static/res/yewuban-smrz-fanmian.png') no-repeat center;
  99.                 background-size: contain;
  100.                 .backBtn{
  101.                     position: absolute;
  102.                     bottom: 50rpx;
  103.                     left: 123rpx;
  104.                     width: 280rpx;
  105.                     height: 90rpx;
  106.                     line-height: 90rpx;
  107.                     background: #3E71FE;
  108.                     box-shadow: 0rpx 8rpx 12rpx 1rpx rgba(62,113,254,0.15);
  109.                     border-radius: 45rpx 45rpx 45rpx 45rpx;
  110.                     font-size: 32rpx;
  111.                     color: #FFFFFF;
  112.                     font-weight: normal;
  113.                     text-align: center;
  114.                 }
  115.                 image{
  116.                     position: absolute;
  117.                     left: 0;
  118.                     top: 0;
  119.                     width: 526rpx;
  120.                     height: 288rpx;
  121.                     border-radius: 20rpx 20rpx 20rpx 20rpx;
  122.                 }
  123.             }
  124.         }
  125.     }

里面的图片和结构根据项目需求自行修改

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/683043
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号