uni-app使用微信的ocr识别身份证

<view style="position: fixed;top: 0rpx;left: 0rpx;" v-if="showCamera">
			<camera device-position="back" flash="off" @error="error" style="width: 100vw; height: 100vh;">
				<view class="photograph">
					<!-- <canvas id="myCanvas" type="2d" style="width: 100%; height: 100%;" class="ocr-canvas"></canvas> -->
					<view style="width: 100vw;height: 90vh;display: flex;justify-content: center;align-items: center;">
						<view class="id-card-frame">
							<view class="tl"></view>
							<view class="tr"></view>
							<view class="bl"></view>
							<view class="br"></view>
						</view>
					</view>
					<view class=""
						style="position: fixed;bottom: 100rpx;width: 100vw;display: flex;justify-content: space-around;">
						<!-- <view class="canvas-clear">取消</view> -->
						<image src="../../static/unsnap.png" mode="" @click="showCamera=false" class="img"></image>
						<image src="../../static/snap.png" mode="" @click="takePhoto" class="img"></image>
						<!-- <view class="canvas-pai" type="primary">拍 照</view> -->
					</view>
				</view>
			</camera>
		</view>
		<u-popup :show="showPopup" mode="bottom" @close="close" @open="open" :closeOnClickOverlay="true">
			<view class="u-popup-bg-view">
				<view @click="showCamera=true,showPopup=false" class="choose">拍照</view>
				<view @click="chooseImage" class="choose">从相册选择</view>
				<view @click="showPopup=false" style="line-height: 100rpx;">取消</view>
			</view>
		</u-popup>

css

.ocr-canvas {
		width: 100vw;
		height: 300rpx;
	}

	.u-popup-bg-view {
		height: 400rpx;
		border-radius: 20rpx;
		text-align: center;
		padding: 30rpx;
	}

	.id-card-frame {
		width: 85.6mm;
		/* 身份证宽度 */
		height: 54mm;
		/* 身份证高度 */
		position: relative;
	}

	.tl {
		position: absolute;
		width: 100rpx;
		height: 100rpx;
		top: 0rpx;
		left: 0rpx;
		border-top: 2rpx solid #ccc;
		border-left: 2rpx solid #ccc;
	}

	.tr {
		position: absolute;
		width: 100rpx;
		height: 100rpx;
		top: 0rpx;
		right: 0rpx;
		border-top: 2rpx solid #ccc;
		border-right: 2rpx solid #ccc;
	}

	.bl {
		position: absolute;
		width: 100rpx;
		height: 100rpx;
		bottom: 0rpx;
		left: 0rpx;
		border-bottom: 2rpx solid #ccc;
		border-left: 2rpx solid #ccc;
	}

	.br {
		position: absolute;
		width: 100rpx;
		height: 100rpx;
		bottom: 0rpx;
		right: 0rpx;
		border-bottom: 2rpx solid #ccc;
		border-right: 2rpx solid #ccc;
	}

	.img {
		width: 156rpx;
		height: 120rpx;
	}

	.u-popup__content.data-v-3a231fda {
		border-radius: 20rpx;
	}

	.choose {
		line-height: 100rpx;
		border-bottom: 2rpx solid #ccc;
	}

methods方法

open() {
				// console.log('open');
			},
			close() {
				this.showPopup = false
				// console.log('close');
			},
			// 拍照识别图片
			takePhoto() {
				const ctx = wx.createCameraContext()
				const _this = this;
				ctx.takePhoto({
					quality: 'high',
					success: (res) => {
						console.log(res.tempImagePath);
						_this.ocrIdentify(res.tempImagePath);
					}

				})
			},
			// 从相册选择图片

			chooseImage() {
				// this.showCamera=true
				const that = this
				uni.chooseMedia({
					count: 1,
					sourceType: ['album'],
					mediaType: ['image'],
					success: function(res) {
						console.log(res);
						if (res.tempFiles[0].size >= 2097152) {
							uni.showModal({
								title: '提示',
								content: '上传文件大小不能超过2M',
								success: function(res) {
									if (res.confirm) { //这里是点击了确定以后
										return
									} else { //这里是点击了取消以后
										return
									}
								}
							})
						} else {
							console.log(res.tempFiles[0].tempFilePath);
							// that.formData.organizationregimg = res.tempFilePaths[0]
							that.ocrIdentify(res.tempFiles[0].tempFilePath)
						}
					}
				})
			},

			// ocr识别功能
			ocrIdentify(tempFilePath) {
				const that = this
				const invokeRes = wx.serviceMarket.invokeService({
					service: 'wx79ac3de8be320b71', //固定的不要动
					api: 'OcrAllInOne', //固定的不要动
					data: {
						// 用 CDN 方法标记要上传并转换成 HTTP URL 的文件
						img_url: new wx.serviceMarket.CDN({
							type: 'filePath',
							filePath: tempFilePath,
						}),
						data_type: 3,
						ocr_type: 1 // 1是身份证识别  7是营业执照识别
					},
					success: function(res) { //打印这个res  就是你想要的结果
						console.log(res)
					}
				})
			},