zc_saas_h5/pages3/imgCompare/index.vue

<template>
	<view>
		<div class="camera-wrap">
			<camera ref="camera" resolution="high" class="camera" frame-size="small"  device-position="back" flash="off"  @error="error"></camera>
			<image class="avatar" src="../static/avatar.png"></image>
		</div>
		<button @click="takePhoto">精度{{point}}</button>
		<text>{{isCard?'拍到了':''}}</text>
		<!-- <image class="img" :src="src" mode="widthFix"></image> -->
		<!-- <view style="width:0;height:0;overflow: hidden;"> -->
			<canvas class="canvas"  canvas-id="canvas1"></canvas>
			<canvas class="canvas"  canvas-id="canvas"></canvas>
		<!-- </view> -->
		
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			point:0,
			context:null,
			src:"",
			isCompare:false,
			isCard:false,
			frontData:[
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    1,
    1,
    0,
    1,
    1,
    0,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    0,
    1,
    1,
    1,
    0,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    0,
    0,
    0,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    0,
    0,
    0,
    0,
    0,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    0,
    0,
    0,
    0,
    0,
    0,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    0,
    0,
    0,
    0,
    0,
    0,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    0,
    0,
    0,
    0,
    0,
    0,
    0,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    1,
    1,
    1,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    0,
    0,
    1,
    1,
    1,
    1,
    0,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    0,
    0,
    0,
    1,
    1,
    1,
    0,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    0,
    0,
    1,
    1,
    1,
    0,
    0,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    0,
    0,
    0,
    1,
    0,
    0,
    0,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    0,
    0,
    0,
    0,
    0,
    0,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    1,
    1,
    1,
    0,
    1,
    1,
    1,
    0,
    1,
    1,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    0,
    0,
    0,
    1,
    0,
    0,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    0,
    0,
    0,
    1,
    0,
    0,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    1,
    0,
    1,
    0,
    1,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    0,
    0,
    0,
    0,
    0,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    0,
    0,
    0,
    0,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    1,
    0,
    1,
    0,
    0,
    0,
    0,
    1,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    0,
    0,
    0,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    1,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    0,
    0,
    0,
    0,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    1,
    1,
    1,
    1,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    0,
    0,
    0,
    0,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    1,
    0,
    1,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    0,
    0,
    0,
    0,
    0,
    1,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    0,
    0,
    0,
    1,
    0,
    0,
    0,
    1,
    0,
    0,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    0,
    0,
    0,
    0,
    1,
    1,
    0,
    1,
    1,
    0,
    0,
    0,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    0,
    0,
    0,
    0,
    1,
    1,
    0,
    1,
    1,
    0,
    0,
    0,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    0,
    0,
    0,
    0,
    0,
    0,
    0,
    1,
    0,
    0,
    0,
    0,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    0,
    0,
    0,
    0,
    0,
    1,
    0,
    1,
    0,
    0,
    0,
    0,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    0,
    0,
    0,
    0,
    1,
    0,
    1,
    0,
    0,
    0,
    0,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    0,
    1,
    1,
    1,
    0,
    0,
    1,
    1,
    1,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    0,
    1,
    1,
    1,
    0,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    0,
    1,
    1,
    1,
    1,
    0,
    1,
    0,
    1,
    1,
    0,
    1,
    0,
    1,
    1,
    0,
    1,
    0,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1,
    1
], //身份证人脸面模板特征值
			backData:'1111100111111111111110110111111101111110111111111111111111110011111111111111111111111111111111111110001111101111111110111110111111000001111000010100101011001111110000011110010101001000000011110000000111111111100011101110111110000000111111111111111110111111100000001111111111111111111111111000000110101100110011001101010111000001000011101100010001000111110000011000110011001100010001000100000110001000110011000100010111100111111111101110110010110101110011111111111111100011111101111111111111111111111100111011110111111010111111111111001100011111110110011101111111110000011111111111111111111111111001101111111111110111111101111100111101111111111110011110111110100101000111110110101111101111111111111011111111111111111110010110011110111110111111100000000000000101101111101111111100001000000010011011111001111111111111111110100110111111111011111011111111100111111111111111111000001010110000001011111111011110000010001101000010011111111001111111111111111111111111110111111111111111111111111111111101111111111111111101111111111110'  //身份证国徽面模板特征值
		};
	},
	computed: { ...mapGetters(['userInfo','goodsAuditionConfigIdList','playSectionId']) },
	onLoad(option) {
		
	},
	onUnload(option) {
		
	},
	mounted() {
		
		this.context = uni.createCanvasContext('canvas')
		const ctx = uni.createCameraContext();
		const listener = ctx.onCameraFrame(frame => {
			if(!this.isCompare) {
				this.isCompare = true;
				
				uni.getSystemInfo({
				　　success: (res) => { // res - 各种参数
				
				　　    let info = uni.createSelectorQuery().select(".canvas");
				　　　  　info.boundingClientRect((data1) => { //data - 各种参数
							var buffer = new Uint8ClampedArray(frame.data);
							//获取是实时拍照原图
							uni.canvasPutImageData({
								  canvasId: 'canvas',
								  x: 0,
								  y: 0,
								  width: frame.width,
								  height: frame.height,
								  data: buffer,
								  success:(res) => {
									  //生成图片
									  uni.canvasToTempFilePath({
									    quality:1,
									    x: 0,
									    y: 0,
									    width: frame.width,
									    height: frame.height,
										destWidth:data1.width,
										destHeight:data1.height,
									    canvasId: 'canvas',
									    success: (res) => {
											// 在H5平台下，tempFilePath 为 base64
											
											//绘制原图到canvas上
											
											this.context.drawImage(res.tempFilePath,0,0,data1.width,data1.height)
											this.context.draw();
										  
											let avatarInfo = uni.createSelectorQuery().select(".avatar");
											
											//获取原图扫描框大小
											avatarInfo.boundingClientRect((data) => {  
												// //data - 各种参数
												let left = data.left;
												let top = data.top;
												let width = data.width;
												let height = data.height;
												
												//获取原图扫描框内容
												uni.canvasGetImageData({
												  canvasId: 'canvas',
												  x: left,
												  y: top,
												  width: width,
												  height: height,
												  success:(res) => {
													// this.isCompare = false;
													  
													  
														//绘制扫描图片
													    uni.canvasPutImageData({
															canvasId: 'canvas',
															x: 0,
															y: 0,
															width: width,
															height: height,
															data: res.data,
															success:(res) => {
													  		  //生成图片
													  		    uni.canvasToTempFilePath({
																  quality:1,
													  		      x: 0,
													  		      y: 0,
																  destWidth:width,
																  destHeight:height,
													  		      width: width,
													  		      height: height,
													  		      canvasId: 'canvas',
													  		      success:async  (res1) => {
													  		  		//绘制并压缩
																	
													  		  		this.context.drawImage(res1.tempFilePath,0,0,width,height,0,0,44,44)
													  		  		this.context.draw();
																	
																		let res = await this.canvasGetImageData('canvas');
																		let newData = Array(res.data.length)
																		newData.fill(0)  
																		res.data.forEach((_data, index) => {  
																		  if ((index + 1) % 4 === 0) {  
																			const R = res.data[index - 3]  
																			const G = res.data[index - 2]  
																			const B = res.data[index - 1] 
																			const gray = ~~((R + G + B) / 3)  
																			
																			res.data[index - 3] = gray  
																			res.data[index - 2] = gray  
																			res.data[index - 1] = gray 
																			res.data[index] = 255 // Alpha 值固定为255  
																		  }  
																		})
																		uni.canvasPutImageData({
																			canvasId: 'canvas1',
																			x: 0,
																			y: 0,
																			width: res.width,
																			height: res.height,
																			data: res.data,
																			success:(res) => {
																				// this.isCompare = false;
																				uni.canvasToTempFilePath({
																					destWidth:res.width,
																					destHeight:res.height,
																					quality:1,
																				  x: 0,
																				  y: 0,
																				  width: width,
																				  height: height,
																				  canvasId: 'canvas1',
																				  success: (res2) => {
																					  this.src = res2.tempFilePath
																				  },
																				})
																			},
																			fail:err => {
																				console.log(err,'err')
																			}
																		})
																		
																		
																		
																		// for (let i = 0; i < newData.length; i += 4) {  
																		//   let R = newData[i]  
																		//   let G = newData[i + 1]  
																		//   let B = newData[i + 2]  
																		//   let Alpha = newData[i + 3] 
																		// }  
																		// let getData = this.getHashFingerprint(res)
																		let threshold = this.OTSUAlgorithm(res)
																		let newImgData = this.binaryzation(res, threshold);
																		let fingerprint = this.getContentFeatureFingerprint(newImgData);
																		// let result = this.getPHashFingerprint(res)
																		let similarty = this.cosineSimilarity(this.frontData,fingerprint)
																		// let distance = this.hammingDistance(this.frontData,result)
																		// let similarty =  (this.frontData.length - distance) / this.frontData.length
																		if(similarty >= 0.9) {
																			this.src = res1.tempFilePath
																			this.isCard = true;
																		} 
																		
																		this.point = similarty
																		
																		setTimeout(() => {
																			this.isCompare = false;
																		},200)
																		console.log(similarty,'similarty')
																			
													  		  	},
													  		  })
															},
														})
													  
													  
													  
													  
													  
														
													    
													}
												})
											}).exec()
											  
										 }
										 
									  })
								  },
								  fail(err) {
									  console.log(err)
								  }
							})
				　　    }).exec()
					   }
				});
				
				
				
			}
		})
		
		listener.start()
	},
	methods: {
		error(err) {
			console.log(err)
		},
		
		getContentFeatureFingerprint(imgData) {
		    const data = imgData.data;
		    const contentFeature = [];
		    for (let i = 0; i < data.length; i += 4) {
		        contentFeature.push(data[i] === 255 ? 1 : 0);
		    }
		    return contentFeature;
		},
		
		toGray (imgData) {  
			const GrayscaleWeight =  {  R : 0.299,  G : 0.587,  B : 0.114  } 
		  const grayData = []  
		  const data = imgData.data  
		  for (let i = 0; i < data.length; i += 4) {  
		    const gray = ~~(data[i] * GrayscaleWeight.R + data[i + 1] * GrayscaleWeight.G + data[i + 2] * GrayscaleWeight.B)  
		    data[i] = data[i + 1] = data[i + 2] = gray  
		    grayData.push(gray)  
		  }  
		  return grayData  
		} ,
		
		OTSUAlgorithm (imgData) {  
			
		  const grayData = this.toGray(imgData)  
		  let ptr = 0  
		  let histData = Array(256).fill(0)  
		  let total = grayData.length  
		  while (ptr < total) {  
		    let h = 0xFF & grayData[ptr++]  
		    histData[h]++  
		  }  
		  let sum = 0  
		  for (let i = 0; i < 256; i++) {  
		    sum += i * histData[i]  
		  }  
		  let wB = 0  
		  let wF = 0  
		  let sumB = 0  
		  let varMax = 0  
		  let threshold = 0  
		  for (let t = 0; t < 256; t++) {  
		    wB += histData[t]  
		    if (wB === 0) continue  
		    wF = total - wB  
		    if (wF === 0) break  
		    sumB += t * histData[t]  
		    let mB = sumB / wB  
		    let mF = (sum - sumB) / wF  
		    let varBetween = wB * wF * (mB - mF) ** 2  
		    if (varBetween > varMax) {  
		      varMax = varBetween  
		      threshold = t  
		    }  
		  }  
		  return threshold  
		},
		
		binaryzation (imgData, threshold) {
		  for (let i = 0; i < imgData.data.length; i += 4) {  
		    let R = imgData.data[i]  
		    let G = imgData.data[i + 1]  
		    let B = imgData.data[i + 2]  
		    let Alpha = imgData.data[i + 3]  
		    let sum = (R + G + B) / 3  
		    imgData.data[i] = sum > threshold ? 255 : 0  
		    imgData.data[i + 1] = sum > threshold ? 255 : 0  
		    imgData.data[i + 2] = sum > threshold ? 255 : 0  
		    imgData.data[i + 3] = Alpha  
		  }  
		  return imgData  
		} ,
		
		canvasGetImageData(id) {
			return new Promise(resolve => {
				uni.canvasGetImageData({
					canvasId: id,
					x: 0,
					y: 0,
					width: 44,
					height: 44,
					success:(res) => {
						resolve(res)
					},
				})
			})
			
		},
		
		hammingDistance (str1, str2) {  
		  let distance = 0  
		  const str1str1Arr = str1.split('')  
		  const str2str2Arr = str2.split('')  
		  str1str1Arr.forEach((letter, index) => {  
		    if (letter !== str2str2Arr[index]) {  
		      distance++  
		    }  
		  })  
		  return distance  
		} ,
		
		cosineSimilarity (sampleFingerprint, targetFingerprint) {  
		  // cosθ = ∑n, i=1(Ai × Bi) / (√∑n, i=1(Ai)^2) × (√∑n, i=1(Bi)^2) = A · B / |A| × |B|  
		  const length = sampleFingerprint.length  
		  let innerProduct = 0  
		  for (let i = 0; i < length; i++) {  
		    innerProduct += sampleFingerprint[i] * targetFingerprint[i]  
		  }  
		  let vecA = 0  
		  let vecB = 0  
		  for (let i = 0; i < length; i++) {  
		    vecA += sampleFingerprint[i] ** 2  
		    vecB += targetFingerprint[i] ** 2  
		  }  
		  const outerProduct = Math.sqrt(vecA) * Math.sqrt(vecB)  
		  return innerProduct / outerProduct  
		} ,
		
		createGrayscale (imgData) {  
		  const newData = Array(imgData.data.length)  
		  newData.fill(0)  
		  imgData.data.forEach((_data, index) => {  
		    if ((index + 1) % 4 === 0) {  
		      const R = imgData.data[index - 3]  
		      const G = imgData.data[index - 2]  
		      const B = imgData.data[index - 1] 
		       const gray = ~~((R + G + B) / 3)  
		      newData[index - 3] = gray  
		      newData[index - 2] = gray  
		      newData[index - 1] = gray 
		       newData[index] = 255 // Alpha 值固定为255  
		    }  
		  })  
		  return this.createImgData(newData)  
		} ,
		
		getHashFingerprint (imgData) {  
		  const grayList = imgData.data.reduce((pre, cur, index) => {  
		    if ((index + 1) % 4 === 0) {  
		      pre.push(imgData.data[index - 1])  
		    }  
		    return pre  
		  }, [])  
		  const length = grayList.length  
		  const grayAverage = grayList.reduce((pre, next) => (pre + next), 0) / length  
		  return grayList.map(gray => (gray >= grayAverage ? 1 : 0)).join('')  
		} ,
		
		emoizeCosines (N, cosMap) {  
		  cosMapcosMap = cosMap || {}  
		  cosMap[N] = new Array(N * N)  
		  let PI_N = Math.PI / N  
		  for (let k = 0; k < N; k++) {  
		    for (let n = 0; n < N; n++) {  
		      cosMap[N][n + (k * N)] = Math.cos(PI_N * (n + 0.5) * k)  
		    }  
		  }  
		  return cosMap  
		}  ,
		memoizeCosines (N, cosMap) {  
		  cosMap = cosMap || {}  
		  cosMap[N] = new Array(N * N)  
		  let PI_N = Math.PI / N  
		  for (let k = 0; k < N; k++) {  
		    for (let n = 0; n < N; n++) {  
		      cosMap[N][n + (k * N)] = Math.cos(PI_N * (n + 0.5) * k)  
		    }  
		  }  
		  return cosMap  
		}  ,
		dct (signal, scale = 2) {  
		  let L = signal.length  
		  let cosMap = null  
		  if (!cosMap || !cosMap[L]) {  
		    cosMap = this.memoizeCosines(L, cosMap)  
		  }  
		  let coefficients = signal.map(function () { return 0 })  
		  return coefficients.map(function (_, ix) {  
		    return scale * signal.reduce(function (prev, cur, index) {  
		      return prev + (cur * cosMap[L][index + (ix * L)])  
		    }, 0)  
		  })  
		} ,
		
		createMatrix (arr) {  
		  const length = arr.length  
		  const matrixWidth = Math.sqrt(length)  
		  const matrix = []  
		  for (let i = 0; i < matrixWidth; i++) {  
		    const _temp = arr.slice(i * matrixWidth, i * matrixWidth + matrixWidth)  
		    matrix.push(_temp)  
		  }  
		  return matrix  
		}  ,
		
		getMatrixRange (matrix, range = 1) {  
		  const rangeMatrix = []  
		  for (let i = 0; i < range; i++) {  
		    for (let j = 0; j < range; j++) {  
		      rangeMatrix.push(matrix[i][j]) 
		     }  
		  }  
		  return rangeMatrix  
		} ,
		
		getPHashFingerprint (imgData) {  
		  const dctData = this.dct(imgData.data)  
		  const dctMatrix = this.createMatrix(dctData)  
		  const rangeMatrix = this.getMatrixRange(dctMatrix, dctMatrix.length / 8)  
		  const rangeAve = rangeMatrix.reduce((pre, cur) => pre + cur, 0) / rangeMatrix.length  
		  return rangeMatrix.map(val => (val >= rangeAve ? 1 : 0)).join('')  
		} ,
		
		takePhoto() {
			const ctx = uni.createCameraContext();
			ctx.takePhoto({
				quality: 'high',
				success: res => {
					this.src = res.tempImagePath;
				},
				fail: err => {
					console.log(err);
				}
			});
		}
	}
};
</script>
<style >
	page{
		background-color: #EAEEF1;
	}
</style>
<style scope lang="scss">
	.camera-wrap {
		position: relative;
		
		.camera {
			width: 750rpx;
			height: 916.67rpx;
		}
		
		.avatar {
			opacity: 0.3;
			position:absolute;
			left:50%;
			top:40rpx;
			transform: translateX(-50%);
			width:633rpx;
			height:400rpx;
		}
	}
	
	.canvas {
		position:fixed;
		top:9999999%;
		left:9999999%;  //canvas藏起来
		width: 750rpx;
		height: 916.67rpx;
	}
	
	.img {
		display: block;
		margin:0 auto;
		width:633rpx;
		height:400rpx;
	}
</style>