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

vue使用tracking实现人脸识别/人脸侦测_multiple readback operations using getimagedata ar

作者：小蓝xlanll | 2024-06-11 03:54:09

赞

踩

multiple readback operations using getimagedata are faster with the willread

1、安装依赖

npm install tracking.js --save

2、完整代码（人脸识别功能）

以下代码实现打开摄像头识别人脸

注：

1、安卓设备的人脸识别实现规则： 打开设备摄像机后，在相机的拍摄下实时进行人脸识别，如果识别到人脸后，1.5秒后自动拍照（可自行调整拍照时间）。

2、IOS设备的人脸识别实现规则：是利用input file的方式来达到打开IOS设备摄像机的目的，此时IOS设备的相机是全屏状态，所以只能在相机拍摄以后，再利用input的change（changePic）事件来得到拍摄的照片，然后再对照片进行人脸识别（检测是否存在人脸），如果检测通过，会保留该图片并且绘制在页面上，如果未通过人脸检测，则会提示未检测到人脸。

  1. <template>
  2.     <div class="camera_outer">
  3.         <!--
  4.       此处代码请勿随意删除:
  5.       input兼容ios无法调用摄像头的问题
  6.       accept属性兼容某些华为手机调用摄像头,打开的是文件管理器的问题
  7.       capture="user" 调用前置摄像头 camera 调用后置摄像头
  8.       如果使用 style="display: none" 隐藏input后，可能会出现无法吊起相册等问题
  9.     -->
  10.         <input
  11.             type="file"
  12.             id="file"
  13.             accept="image/*"
  14.             capture="user"
  15.             style="opacity: 0;"
  16.             @change="changePic"
  17.         />
  18.         <video
  19.             id="videoCamera"
  20.             :width="videoWidth"
  21.             :height="videoHeight"
  22.             autoplay
  23.             class="img_bg_camera"
  24.         />
  25.         <!-- 
  26.             如果使用 style="display: none" 隐藏canvas后，将不会显示出人脸检测的识别框
  27.             如需要人脸识别框显示 video与canvas 样式是需要相同（目的是保持同一位置）
  28.         -->
  29.         <canvas
  30.             id="canvasCamera"
  31.             :width="videoWidth"
  32.             :height="videoHeight"
  33.             class="img_bg_camera"
  34.         />
  35.         <div v-if="imgSrc" class="img_bg_camera" :class="[isDisplay ? 'displayBlock' : 'displayNone']">
  36.             <img id="imgId" :src="imgSrc" alt class="tx_img" />
  37.         </div>
  38.         <div class="bottomButton">
  39.             <van-button id="open" type="warning" @click="getCamers()" class="marginRight10" >打开摄像机</van-button>
  40.         </div>
  41.     </div>
  42. </template>
  43.  
  44. <script>
  45. // npm install tracking.js --save
  46. require("tracking/build/tracking-min.js");
  47. require("tracking/build/data/face-min.js");
  48. require("tracking/build/data/eye-min.js");
  49. require("tracking/build/data/mouth-min.js");
  50. require("tracking/examples/assets/stats.min.js");
  51. export default {
  52.     data() {
  53.         return {
  54.             videoWidth: 300, //摄像机宽度
  55.             videoHeight: 300, //摄像机高度
  56.             imgSrc: "", //生成图片链接
  57.             canvas:  null, //canvas
  58.             context: null, //context
  59.             video: null, //video
  60.             isFlag: false, //非正常拍照
  61.             isDisplay: false, //生成的照片是否显示
  62.         }
  63.     },
  64.     mounted() {
  65.         // this.getCompetence();
  66.     },
  67.     destroyed() {
  68.         this.stopNavigator();
  69.     },
  70.     methods: {
  71.         //调用权限（打开摄像头功能）
  72.         getCompetence() {
  73.             var _this = this;
  74.             //得到canvasCamera的元素
  75.             this.canvas = document.getElementById("canvasCamera");
  76.             this.context = this.canvas.getContext("2d"); // 画布
  77.             this.video = document.getElementById("videoCamera");
  78.             // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
  79.             if (navigator.mediaDevices === undefined) {
  80.                 Object.defineProperty(navigator, "mediaDevices", {
  81.                     value: {},
  82.                     writable: true,
  83.                     configurable: true,
  84.                     enumerable: true,
  85.                 });
  86.             }
  87.             // 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象，如果使用getUserMedia，因为它会覆盖现有的属性。如果缺少getUserMedia属性，就添加它。
  88.             if (navigator.mediaDevices.getUserMedia === undefined) {
  89.                 navigator.mediaDevices.getUserMedia = function (constraints) {
  90.                     // 首先获取现存的getUserMedia(如果存在)
  91.                     var getUserMedia = navigator.getUserMedia || navigator.mediaDevices.getUserMedia;
  92.                     // 有些浏览器不支持，会返回错误信息
  93.                     if (!getUserMedia) {
  94.                         this.$toast("getUserMedia is not implemented in this browser");
  95.                         return Promise.reject(
  96.                             new Error(
  97.                                 "getUserMedia is not implemented in this browser"
  98.                             )
  99.                         );
  100.                     }
  101.                     // 否则，使用Promise将调用包装到旧的navigator.getUserMedia
  102.                     return new Promise(function (resolve, reject) {
  103.                         getUserMedia.call(
  104.                             navigator,
  105.                             constraints,
  106.                             resolve,
  107.                             reject
  108.                         );
  109.                     });
  110.                 };
  111.             }
  112.             var constraints = {
  113.                 audio: false,
  114.                 video: {
  115.                     width: this.videoWidth,
  116.                     height: this.videoHeight,
  117.                     transform: "scaleX(-1)",
  118.                     facingMode: "user", // user 安卓前置摄像头  {exact: 'environment} 后置摄像头
  119.                 },
  120.             }
  121.             //使苹果手机和苹果ipad支持打开摄像机
  122.             if (
  123.                 navigator.userAgent.toLowerCase().indexOf("iphone") != -1 ||
  124.                 navigator.userAgent.toLowerCase().indexOf("ipad") != -1
  125.             ) {
  126.                 //使得file一定可以获取到
  127.                 document.getElementById("file").click();
  128.                 
  129.             } else { // (安卓/浏览器（除safari浏览器）) 在用户允许的情况下，打开相机，得到相关的流
  130.                 navigator.mediaDevices
  131.                     .getUserMedia(constraints)
  132.                     .then(function (stream) {
  133.                         // 旧的浏览器可能没有srcObject
  134.                         if (!_this.video) {
  135.                             _this.video = {};
  136.                         }
  137.                         try {
  138.                             _this.video.srcObject = stream;
  139.                         } catch (err) {
  140.                             _this.video.src = window.URL.createObjectURL(stream); // window.URL || window.webkitURL
  141.                         }
  142.                         _this.isFlag = true;
  143.                         _this.video.onloadedmetadata = () => {
  144.                             _this.video.play();
  145.                             _this.initTracker();// 人脸捕捉
  146.                         }
  147.                     })
  148.                     .catch((err) => {
  149.                         this.$toast('访问用户媒体权限失败，请重试');
  150.                     });
  151.             }
  152.         },
  153.         // 人脸捕捉 设置各种参数 实例化人脸捕捉实例对象,注意canvas上面的动画效果。
  154.         // 使用 domId 来控制监听那个容器 Android 使用容器 #videoCamera，IOS使用容器 #imgId
  155.         initTracker(domId) {
  156.             // this.tracker = new window.tracking.ObjectTracker("face"); // tracker实例
  157.             this.tracker = new window.tracking.ObjectTracker(['face', 'eye', 'mouth']); // tracker实例
  158.             this.tracker.setInitialScale(4);
  159.             this.tracker.setStepSize(2); // 设置步长
  160.             this.tracker.setEdgesDensity(0.1);
  161.             try {
  162.                 this.trackertask = window.tracking.track(domId ? domId :"#videoCamera", this.tracker); // 开始追踪
  163.             } catch (e) {
  164.                 this.$toast("访问用户媒体失败，请重试")
  165.             }
  166.             //开始捕捉方法 一直不停的检测人脸直到检测到人脸
  167.             this.tracker.on("track", (e) => {
  168.                 //画布描绘之前清空画布
  169.                 this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  170.                 if (e.data.length === 0) {
  171.                     if(domId) this.$toast("未检测到人脸，请重新拍照或上传")
  172.                 } else {
  173.                     if(!domId){ // 安卓设备
  174.                         e.data.forEach((rect) => { //设置canvas 方框的颜色大小
  175.                             this.context.strokeStyle = "#42e365";
  176.                             this.context.lineWidth = 2;
  177.                             this.context.strokeRect(rect.x, rect.y, rect.width, rect.height);
  178.                         });
  179.                         if (!this.tipFlag) {
  180.                             this.$toast("检测成功，正在拍照，请保持不动2秒")
  181.                         }
  182.                     }else{ // IOS设备或safari浏览器
  183.                         if (!this.tipFlag) {
  184.                             this.$toast("检测成功，正在生成，请稍等")
  185.                         }
  186.                     }
  187.                     
  188.                     // 1.5秒后拍照，仅拍一次 给用户一个准备时间
  189.                     // falg 限制一直捕捉人脸，只要拍照之后就停止检测
  190.                     if (!this.flag) {
  191.                         this.tipFlag = true
  192.                         this.flag = true;
  193.                         this.removePhotoID = setTimeout(() => {
  194.                             this.$toast("图像生成中···")
  195.                             this.setImage(domId ? true:false);
  196.                             this.stopNavigator() // 关闭摄像头
  197.                             this.flag = false
  198.                             this.tipFlag = false;
  199.                             clearInterval(this.removePhotoID)
  200.                             this.removePhotoID = null
  201.                         }, 1500);
  202.                     }
  203.                 }
  204.             });
  205.         },
  206.         //苹果手机获取图片并且保存图片
  207.         changePic(event) {
  208.             this.isDisplay = false; // 隐藏已拍照片的展示
  209.             
  210.             var reader = new FileReader();
  211.             var f = (document.getElementById("file")).files;
  212.             reader.readAsDataURL(f[0]);
  213.             reader.onload = () => {
  214.                 var re = reader.result;
  215.                 this.canvasDataURL(re, { quality: 1 }, (base64Codes) => {
  216.                     if (base64Codes) {
  217.                         this.imgSrc = base64Codes;
  218.                         
  219.                         // 此方式是为了检测图片中是否有人脸
  220.                         this.$nextTick(()=>{
  221.                             this.isFlag = true;
  222.                             this.initTracker('#imgId')
  223.                         })
  224.  
  225.                         // 如果不需要检验拍照或上传图片中是否有人脸，可注释上方人脸检测代码，使用此种方式
  226.                         // this.isDisplay = true;
  227.                         // this.submitCollectInfo();
  228.                         
  229.                     } else {
  230.                         this.$toast('拍照失败');
  231.                     }
  232.                     event.target.value = ""; // 解决上传相同文件不触发change事件问题
  233.                 });
  234.             };
  235.         },
  236.         //压缩图片
  237.         canvasDataURL(path, obj, callback) {
  238.             let img = new Image();
  239.             img.src = path;
  240.             const that = this;
  241.             img.onload = () => {
  242.                 // 默认按比例压缩
  243.                 var w = that.videoWidth, h = that.videoHeight, scale = w / h;
  244.                 // 使用人脸识别video高度
  245.                 // w = obj.width || w;
  246.                 // h = obj.height || w / scale;
  247.  
  248.                 // 使用图片真实高度（像素）图像更加清晰
  249.                 w = img.width;
  250.                 h = img.height;
  251.                 
  252.                 var quality = 0.5; // 默认图片质量为0.5
  253.                 //生成canvas
  254.                 var canvas = document.createElement("canvas");
  255.                 // canvas 设置宽高 使用默认宽高图片会变形、失真
  256.                 canvas.width = w
  257.                 canvas.height = h
  258.                 var ctx = canvas.getContext("2d");
  259.                 // 创建属性节点
  260.                 ctx.drawImage(img, 0, 0, w, h);
  261.                 // 图像质量 数值范围(0 ~ 1) 1表示最好品质，0基本不被辨析但有比较小的文件大小;
  262.                 if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
  263.                     quality = obj.quality;
  264.                 }
  265.                 // quality值越小，所绘制出的图像越模糊
  266.                 var base64 = canvas.toDataURL("image/jpeg", quality);
  267.                 // 回调函数返回base64的值
  268.                 callback(base64);
  269.             };
  270.         },
  271.         //绘制图片（拍照功能）
  272.         setImage(flag) {
  273.             if(!this.context){
  274.                 this.$toast('请打开摄像机')
  275.                 return;
  276.             }
  277.             this.context.drawImage(
  278.                 flag ? document.getElementById('imgId') : this.video,
  279.                 0,
  280.                 0,
  281.                 this.videoWidth,
  282.                 this.videoHeight
  283.             );
  284.             // 获取图片base64链接
  285.             var image = this.canvas.toDataURL("image/png", 0.5);
  286.             if (this.isFlag) {
  287.                 if (image) {
  288.                     this.imgSrc = image;
  289.                     this.isDisplay = true;
  290.                     this.submitCollectInfo();
  291.                 } else {
  292.                     this.$toast("图像生成失败");
  293.                 }
  294.             } else {
  295.                 this.$toast("图像生成失败");
  296.             }
  297.         },
  298.         //保存图片
  299.         async submitCollectInfo() { //其中可以和后端做一些交互
  300.             console.log('与后端交互');
  301.         },
  302.         // 关闭摄像头 并且停止人脸检测
  303.         stopNavigator() {
  304.             if (this.video && this.video.srcObject) {
  305.                 this.video.srcObject.getTracks()[0].stop();
  306.             }
  307.             if(this.trackertask) this.trackertask.stop();
  308.             this.tracker = null;
  309.             this.isFlag = false
  310.         },
  311.         //打开摄像机
  312.         getCamers() {
  313.             this.isDisplay = false; // 隐藏已拍照片的展示
  314.             this.getCompetence();
  315.         },
  316.         // 以下是提供的几种可能在优化或者与后端交互时需要使用的方法
  317.         // //返回
  318.         // goBack() {
  319.         //     this.stopNavigator();
  320.         //     //可以写相应的返回的一些操作，携带一些需要携带的参数
  321.         // },
  322.         // // 访问用户媒体设备
  323.         // getUserMedias(constrains, success, error) {
  324.         //     if (navigator && navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { //最新标准API
  325.         //         navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
  326.         //     } else if (navigator && navigator.webkitGetUserMedia) { //webkit内核浏览器
  327.         //         navigator.webkitGetUserMedia(constrains).then(success).catch(error);
  328.         //     } else if (navigator && navigator.mozGetUserMedia) { //Firefox浏览器
  329.         //         navagator.mozGetUserMedia(constrains).then(success).catch(error);
  330.         //     } else if (navigator && navigator.getUserMedia) { //旧版API
  331.         //         navigator.getUserMedia(constrains).then(success).catch(error);
  332.         //     } else {
  333.         //         this.$toast("你的浏览器不支持访问用户媒体设备")
  334.         //         // error("访问用户媒体失败")
  335.         //     }
  336.         // },
  337.         // // Base64转文件
  338.         // getBlobBydataURI(dataURI, type) {
  339.         //     var binary = window.atob(dataURI.split(",")[1]);
  340.         //     var array = [];
  341.         //     for (var i = 0; i < binary.length; i++) {
  342.         //         array.push(binary.charCodeAt(i));
  343.         //     }
  344.         //     return new Blob([new Uint8Array(array)], {
  345.         //         type: type,
  346.         //     });
  347.         // },
  348.         // compare(url) {
  349.         //     let blob = this.getBlobBydataURI(url, 'image/png')
  350.         //     let formData = new FormData()
  351.         //     formData.append("file", blob, "file_" + Date.parse(new Date()) + ".png")
  352.         //     // TODO 得到文件后进行人脸识别
  353.         // },
  354.     }
  355. }
  356. </script>
  357.  
  358. <style lang="scss" scoped>
  359. .camera_outer {
  360.     position: relative;
  361.     overflow: hidden;
  362.     background-size: cover;
  363.     background: white;
  364.     width: 100%;
  365.     height: 100%;
  366. }
  367. video,
  368. canvas,
  369. .tx_img {
  370.     -moz-transform: scaleX(-1);
  371.     -webkit-transform: scaleX(-1);
  372.     -ms-transform: scaleX(-1);
  373.     -o-transform: scaleX(-1);
  374.     transform: scaleX(-1);
  375. }
  376. .img_bg_camera {
  377.     position: absolute;
  378.     bottom: 25%;
  379.     top: 25%;
  380.     left: 50%;
  381.     margin-left: -150px;
  382.     border-radius: 50%;
  383.     -webkit-border-radius: 50%;
  384.     -moz-border-radius: 50%;
  385.     -ms-border-radius: 50%;
  386.     -o-border-radius: 50%;
  387. }
  388. .img_bg_camera img {
  389.     width: 300px;
  390.     height: 300px;
  391.     border-radius: 50%;
  392.     -webkit-border-radius: 50%;
  393.     -moz-border-radius: 50%;
  394.     -ms-border-radius: 50%;
  395.     -o-border-radius: 50%;
  396. }
  397.  
  398. .displayNone {
  399.     // display: none;
  400.     opacity: 0;
  401. }
  402.  
  403. .displayBlock {
  404.     // display: block;
  405.     opacity: 1;
  406. }
  407.  
  408. .marginRight10 {
  409.     margin-right: 20px;
  410. }
  411.  
  412. .bottomButton {
  413.     position: fixed;
  414.     bottom: 20px;
  415.     width: 100%;
  416.     text-align: center;
  417. }
  418. </style>

该项目在调试时，tracking.js相关依赖会在检测人脸时，会有两个警告频繁出现，但不会影响项目的运行

第一个问题：[Violation] 'requestAnimationFrame' handler took <N>ms 

这个警告通常是因为你的canvas或者video渲染过于复杂或者数据量过大，导致在浏览器的一帧内渲染超时。但本人目前没有太好的解决方法，如广大网友有了解或者是解决办法，希望可以在评论区讨论一下

第二个问题：Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true.

这个警告大概的意思是 使用getImageData的多次读回操作会更快，建议将willReadFrequency属性设置为true。目前的解决方法是将 node_modules 依赖中的 tracking.js 和 tracking-min.js 这两个文件中的 getContext("2d") 和 getContext('2d') 整体替换为 getContext("2d",{ willReadFrequently: true })

另外如果不使用npm方式下载，也可以使用本地文件导入的方式 提供tracking.js相关文件 链接: https://pan.baidu.com/s/1oxJ2z6m5g4T9EUZG2XGgdg 提取码: emqn 

3、调试代码（无人脸识别，可自行拍照和上传任意图片）

  1. <template>
  2.     <div class="camera_outer">
  3.         <!--
  4.       此处代码请勿随意删除:
  5.       input兼容ios无法调用摄像头的问题
  6.       accept属性兼容某些华为手机调用摄像头,打开的是文件管理器的问题
  7.     -->
  8.         <input
  9.             type="file"
  10.             id="file"
  11.             accept="image/*"
  12.             capture="camera"
  13.             style="display: none"
  14.             @change="changePic"
  15.         />
  16.         <video
  17.             id="videoCamera"
  18.             :width="videoWidth"
  19.             :height="videoHeight"
  20.             autoplay
  21.             class="img_bg_camera"
  22.         />
  23.         <canvas
  24.             style="display: none"
  25.             id="canvasCamera"
  26.             :width="videoWidth"
  27.             :height="videoHeight"
  28.             class="img_bg_camera"
  29.         />
  30.         <div
  31.             v-if="imgSrc"
  32.             class="img_bg_camera"
  33.             :class="[isDisplay ? 'displayBlock' : 'displayNone']"
  34.         >
  35.             <img :src="imgSrc" alt class="tx_img" />
  36.         </div>
  37.         <div class="bottomButton">
  38.             <van-button color="#aaaaaa" @click="stopNavigator()" class="marginRight10"
  39.                 >关闭摄像头</van-button
  40.             >
  41.             <van-button
  42.                 id="open"
  43.                 type="warning"
  44.                 @click="getCamers()"
  45.                 class="marginRight10"
  46.                 >打开摄像机</van-button
  47.             >
  48.             <van-button type="warning" @click="setImage()">拍照</van-button>
  49.         </div>
  50.     </div>
  51. </template>
  52.  
  53. <script>
  54. export default {
  55.     data() {
  56.         return {
  57.             videoWidth: 300, //摄像机宽度
  58.             videoHeight: 300, //摄像机高度
  59.             imgSrc: "", //生成图片链接
  60.             canvas:  null, //canvas
  61.             context: null, //context
  62.             video: null, //video
  63.             isFlag: false, //非正常拍照
  64.             isDisplay: false, //生成的照片是否显示
  65.         }
  66.     },
  67.     mounted() {
  68.         // this.getCompetence();
  69.     },
  70.     destroyed() {
  71.         this.stopNavigator();
  72.     },
  73.     methods: {
  74.         //调用权限（打开摄像头功能）
  75.         getCompetence() {
  76.             var _this = this;
  77.             //得到canvasCamera的元素
  78.             this.canvas = document.getElementById("canvasCamera");
  79.             this.context = this.canvas.getContext("2d");
  80.             this.video = document.getElementById("videoCamera");
  81.             // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
  82.             if (navigator.mediaDevices === undefined) {
  83.                 Object.defineProperty(navigator, "mediaDevices", {
  84.                     value: {},
  85.                     writable: true,
  86.                     configurable: true,
  87.                     enumerable: true,
  88.                 });
  89.             }
  90.             // 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象，如果使用getUserMedia，因为它会覆盖现有的属性。如果缺少getUserMedia属性，就添加它。
  91.             if (navigator.mediaDevices.getUserMedia === undefined) {
  92.                 navigator.mediaDevices.getUserMedia = function (constraints) {
  93.                     // 首先获取现存的getUserMedia(如果存在)
  94.                     var getUserMedia = navigator.getUserMedia || navigator.mediaDevices.getUserMedia;
  95.                     // 有些浏览器不支持，会返回错误信息
  96.                     if (!getUserMedia) {
  97.                         console.log('getUserMedia is not implemented in this browser');
  98.                         return Promise.reject(
  99.                             new Error(
  100.                                 "getUserMedia is not implemented in this browser"
  101.                             )
  102.                         );
  103.                     }
  104.                     // 否则，使用Promise将调用包装到旧的navigator.getUserMedia
  105.                     return new Promise(function (resolve, reject) {
  106.                         getUserMedia.call(
  107.                             navigator,
  108.                             constraints,
  109.                             resolve,
  110.                             reject
  111.                         );
  112.                     });
  113.                 };
  114.             }
  115.             var constraints = {
  116.                 audio: false,
  117.                 video: {
  118.                     width: this.videoWidth,
  119.                     height: this.videoHeight,
  120.                     transform: "scaleX(-1)",
  121.                 },
  122.             }
  123.             //使苹果手机和苹果ipad支持打开摄像机
  124.             if (
  125.                 navigator.userAgent.toLowerCase().indexOf("iphone") != -1 ||
  126.                 navigator.userAgent.toLowerCase().indexOf("ipad") != -1
  127.             ) {
  128.                 //使得file一定可以获取到
  129.                 document.getElementById("file").click();
  130.                 
  131.             } else {
  132.                 //在用户允许的情况下，打开相机，得到相关的流
  133.                 navigator.mediaDevices
  134.                     .getUserMedia(constraints)
  135.                     .then(function (stream) {
  136.                         // 旧的浏览器可能没有srcObject
  137.                         if (!_this.video) {
  138.                             _this.video = {};
  139.                         }
  140.                         try {
  141.                             _this.video.srcObject = stream;
  142.                         } catch (err) {
  143.                             _this.video.src = window.URL.createObjectURL(stream);
  144.                         }
  145.                         _this.isFlag = true;
  146.                         _this.video.onloadedmetadata = () => _this.video.play();
  147.                     })
  148.                     .catch((err) => {
  149.                         console.log(err);
  150.                     });
  151.             }
  152.         },
  153.         //苹果手机获取图片并且保存图片
  154.         changePic() {
  155.             var reader = new FileReader();
  156.             var f = (document.getElementById("file")).files;
  157.             reader.readAsDataURL(f[0]);
  158.             reader.onload = () => {
  159.                 var re = reader.result;
  160.                 this.canvasDataURL(re, { quality: 0.5 }, (base64Codes) => {
  161.                     if (base64Codes) {
  162.                         this.imgSrc = base64Codes;
  163.                         this.isDisplay = true;
  164.                         this.submitCollectInfo();
  165.                     } else {
  166.                         this.$toast('拍照失败');
  167.                     }
  168.                 });
  169.             };
  170.         },
  171.         //压缩图片
  172.         canvasDataURL(path, obj, callback) {
  173.             let img = new Image();
  174.             img.src = path;
  175.             const that = this;
  176.             img.onload = () => {
  177.                 // 默认按比例压缩
  178.                 var w = that.videoWidth, h = that.videoHeight, scale = w / h;
  179.                 // w = obj.width || w;
  180.                 // h = obj.height || w / scale;
  181.                 w = img.width || w;
  182.                 h = img.height || w / scale;
  183.                 var quality = 0.5; // 默认图片质量为0.5
  184.                 //生成canvas
  185.                 var canvas = document.createElement("canvas");
  186.                 // canvas 设置宽高 使用默认宽高图片会变形、失真
  187.                 canvas.width = w
  188.                 canvas.height = h
  189.                 var ctx = canvas.getContext("2d");
  190.                 // 创建属性节点
  191.                 ctx.drawImage(img, 0, 0, w, h);
  192.                 // 图像质量
  193.                 if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
  194.                     quality = obj.quality;
  195.                 }
  196.                 // quality值越小，所绘制出的图像越模糊
  197.                 var base64 = canvas.toDataURL("image/jpeg", quality);
  198.                 // 回调函数返回base64的值
  199.                 callback(base64);
  200.             };
  201.         },
  202.         //绘制图片（拍照功能）
  203.         setImage() {
  204.             this.context.drawImage(
  205.                 this.video,
  206.                 0,
  207.                 0,
  208.                 this.videoWidth,
  209.                 this.videoHeight
  210.             );
  211.             // 获取图片base64链接
  212.             var image = this.canvas.toDataURL("image/png", 0.5);
  213.             if (this.isFlag) {
  214.                 if (image) {
  215.                     this.imgSrc = image;
  216.                     this.isDisplay = true;
  217.                     this.submitCollectInfo();
  218.                 } else {
  219.                     console.log("拍照失败");
  220.                 }
  221.             } else {
  222.                 console.log("拍照失败");
  223.             }
  224.         },
  225.         //保存图片
  226.         async submitCollectInfo() { //其中可以和后端做一些交互
  227.             console.log('与后端交互');
  228.         },
  229.         // 关闭摄像头
  230.         stopNavigator() {
  231.             if (this.video && this.video.srcObject) {
  232.                 this.video.srcObject.getTracks()[0].stop();
  233.             }
  234.         },
  235.         //打开摄像机
  236.         getCamers() {
  237.             this.isDisplay = false; // 隐藏已拍照片的展示
  238.             this.getCompetence();
  239.         },
  240.     }
  241. }
  242. </script>
  243.  
  244. <style lang="scss" scoped>
  245. .camera_outer {
  246.     position: relative;
  247.     overflow: hidden;
  248.     background-size: cover;
  249.     background: white;
  250.     width: 100%;
  251.     height: 100%;
  252. }
  253. video,
  254. canvas,
  255. .tx_img {
  256.     -moz-transform: scaleX(-1);
  257.     -webkit-transform: scaleX(-1);
  258.     -ms-transform: scaleX(-1);
  259.     -o-transform: scaleX(-1);
  260.     transform: scaleX(-1);
  261. }
  262. .img_bg_camera {
  263.     position: absolute;
  264.     bottom: 25%;
  265.     top: 25%;
  266.     left: 50%;
  267.     margin-left: -150px;
  268.     border-radius: 50%;
  269.     -webkit-border-radius: 50%;
  270.     -moz-border-radius: 50%;
  271.     -ms-border-radius: 50%;
  272.     -o-border-radius: 50%;
  273. }
  274. .img_bg_camera img {
  275.     width: 300px;
  276.     height: 300px;
  277.     border-radius: 50%;
  278.     -webkit-border-radius: 50%;
  279.     -moz-border-radius: 50%;
  280.     -ms-border-radius: 50%;
  281.     -o-border-radius: 50%;
  282. }
  283.  
  284. .displayNone {
  285.     display: none;
  286. }
  287.  
  288. .displayBlock {
  289.     display: block;
  290. }
  291.  
  292. .marginRight10 {
  293.     margin-right: 20px;
  294. }
  295.  
  296. .bottomButton {
  297.     position: fixed;
  298.     bottom: 20px;
  299.     width: 100%;
  300.     text-align: center;
  301. }
  302. </style>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/701612
推荐阅读
相关标签

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

  

闽ICP备14008679号