• APP自定义身份证相机(Android +iOS)

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

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

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

     自定义相机 - DCloud 插件市场

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

    创建一个realName.vue文件

    1. 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.     
    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进去

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

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

    在realName.vue文件中加入：

    "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.     }

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

  • 相关阅读:
    Android问题笔记四十六：解决open failed: EACCES (Permission denied) 问题
    46-3 护网溯源 - 溯源报告编写
    IDEA2020.3无法输入中文问题解决
    剑指 Offer 12. 矩阵中的路径【中等难度】
    SelfKG代码阅读及相关工作
    【八大经典排序算法】快速排序
    视觉目标检测大模型套件detrex-调研
    数组：
    计算机竞赛 题目：基于卷积神经网络的手写字符识别 - 深度学习
    【无标题】
  • 原文地址：https://blog.csdn.net/Rio_Gaven/article/details/138153584