ShapeDetectionAPI已经发布有一段时间了，主要能力是给前端直接可用的特征检测接口（包括条形码、人脸、文字检测）。本文将简单介绍一下，并对前端人脸检测做一个大概的说明。（本文不谈算法~希望拍拍）1背景与场景人脸检测（FaceDetection）是一个常见的话题，广泛应用于金融、安防、电商、智能手机、娱乐影业等行业。所涉及的技术也在不断发展。这里有一些想法：基于特征的人脸检测比如opencv内置了基于Viola-Jones目标检测框架的Harr分类器（其实大部分分类器都是基于学习的），你只需要加载相应的配置文件（haarcascade_frontalface_alt.xml)直接调用detectObject完成检测过程，同时也支持检测其他特征（如鼻子、嘴巴等）。b.基于学习的人脸检测实际上是对需要通过算子提取的图像中的局部特征进行分类、计数、回归得到的更准确、响应速度更快的分类器。2例程采集2.1后端处理前端通过网络将资源传输到后端，后端统一处理需要检测的图像或视频流，这对后端提出了一定的挑战建筑学。同时，网络延迟往往无法带来实时交互效果。2.2客户端处理得益于OpenCV在跨语言、跨平台方面的优势，客户端也可以以较低的开发成本提供人脸检测能力，可以通过JsBridge等方式向Web容器提供服务。这个容器，孤立的页面将失去这种能力。直到有一天...2.3OpenServices不知道从什么时候开始，云计算等概念如雨后春笋般涌现，计算成本一天天下降。各大研发团队（如阿里云、Face++）已经准备好毫不费力地推出人脸检测服务，甚至还带来了各种特殊功能！特别的！衣服！服务！，人脸识别，活体识别，文档OCR和人脸比对等。虽然它不仅提供了客户端SDK和前后端API，但是还是说说我的纯前端方案吧。3时代带来了什么？那么人脸识别还停留在前端刀耕火种的古代。但是，我们的基础设施建设已经开始了。希望后续的一些相关介绍能给读者带来一些启发。3.1ShapeDetectionAPI随着客户端硬件计算能力的逐步提升，在浏览器层面获取的权限越来越多。由于图像处理需要大量的计算资源，实际上浏览器也可以承担一些图像检测的工作，所以创建了ShapeDetectionAPI。下面通过简单的例子介绍基本的用法。在尝试编辑和运行这些代码之前，请确保您的Chrome版本和此新功能已激活。另外API受同源策略限制：chrome://flags/#enable-experimental-web-platform-featuresBarcodeDetection:BarcodeDetection(ForChrome56+)varbarcodeDetector=newBarcodeDetector();barcodeDetector.detect(image).then(barcodes=>{barcodes.forEach(barcode=>console.log(barcodes.rawValue))}).catch(err=>console.error(err));人脸检测：人脸检测（适用于Chrome56+）varfaceDetector=newFaceDetector();faceDetector.detect(image).then(faces=>faces.forEach(face=>console.log(face))).catch(err=>console.error(err));文本检测：文本检测（对于Chrome58+）vartextDetector=newTextDetector();textDetector.detect(image).then(boundingBoxes=>{for(letboxofboundingBoxes){speechSynthesis.speak(newSpeechSynthesisUtterance(box.rawValue)));}}).catch(err=>console.error(err));3.2图片人脸检测图片人脸检测比较简单，只需要传入一个图片元素，直接调用API即可进行人脸识别了。然后抓取画布，我们就可以显示检测结果了。核心代码：varimage=document.querySelector('#image');varcanvas=document.querySelector('#canvas');varctx=canvas.getContext("2d");varscale=1;image.onload=function(){ctx.drawImage(image,0,0,image.width,image.height,0,0,canvas.width,canvas.height);scale=canvas.width/image.width;};functiondetect(){if(window.FaceDetector==undefined){console.error('不支持人脸检测');返回;}varfaceDetector=newFaceDetector();console.time('检测');returnfaceDetector.detect(image).then(faces=>{console.log(faces)//在
