</ script><br></pre><p>链接：https://github.com/justadudewhohacks/face-api.js/tree/master/dist</p><p>如果你使用npm：</p><pre>npm i face-api.js<br></pre><p>加载模型数据</p><p>根据应用程序的要求，你可以专门加载所需的模型，但要运行完整的端到端示例，我们需要加载人脸检测，人脸标识和人脸识别模型。模型文件在repo上可用，下方链接中找到。</p><p>https://github.com/justadudewhohacks/face-api.js/tree/master/weights</p><p>已经量化了模型权重，将模型文件大小减少了75％，以便使你的客户端仅加载所需的最小数据。此外，模型权重被分割成最大4MB的块，以允许浏览器缓存这些文件，使得它们只需加载一次。</p><p>模型文件可以简单地作为静态资源（static asset）提供给你的Web应用程序，可以在其他地方托管它们，可以通过指定文件的路径或url来加载它们。假设你在models目录中提供它们并且资源在public/models下：</p><pre>const MODEL_URL = '/models'<br>await faceapi.loadModels(MODEL_URL)<br></pre><p>或者，如果你只想加载特定模型：</p><pre>const MODEL_URL = '/models'<br>await faceapi.loadFaceDetectionModel(MODEL_URL)<br>await faceapi.loadFaceLandmarkModel(MODEL_URL)<br>await faceapi.loadFaceRecognitionModel(MODEL_URL)<br></pre><p>从输入图像接收所有面孔的完整描述</p><p>神经网络接受HTML图像，画布或视频元素或张量作为输入。要使用score> minScore检测输入的人脸边界框，我们只需声明：</p><pre>const minConfidence = 0.8<br>const fullFaceDescriptions = await faceapi.allFaces(input, minConfidence)<br></pre><p>完整的人脸描述检测结果(边界框+分数)、人脸标志以及计算出的描述符。正如你所看到的，faceapi.allFaces在前面讨论过的所有内容都适用于我们。但是，你也可以手动获取人脸位置和标志。如果这是你的目标，github repo上有几个示例。</p><p>请注意，边界框和标志位置是相对于原始图像/媒体大小。如果显示的图像尺寸与原始图像尺寸不一致，则可以调整它们的尺寸：</p><pre>const resized = fullFaceDescriptions.map(fd => fd.forSize(width, height))<br></pre><p>我们可以通过将边界框绘制到画布中来可视化检测结果：</p><pre>fullFaceDescription.forEach((fd, i) => {<br> faceapi.drawDetection(canvas, fd.detection, { withScore: true })<br>})<br></pre><div class="pgc-img"><img class="lazy" src="//p2.ttnews.xyz/loading.gif" data-original="http://p3.pstatp.com/large/pgc-image/153017761175365f12ea2c5" img_width="600" img_height="334" style="height:334px" alt="JS使用者福音：在浏览器中运行人脸识别" inline="0"><p class="pgc-img-caption"></p></div><p>脸部可 以显示如下：</p><pre>fullFaceDescription.forEach((fd, i) => {<br> faceapi.drawLandmarks(canvas, fd.landmarks, { drawLines: true })<br>})<br></pre><div class="pgc-img"><img class="lazy" src="//p2.ttnews.xyz/loading.gif" data-original="http://p1.pstatp.com/large/pgc-image/1530177611906df56d85038" img_width="888" img_height="331" alt="JS使用者福音：在浏览器中运行人脸识别" inline="0"><p class="pgc-img-caption"></p></div><p>通常，我所做的可视化工作是在img元素的顶部覆盖一个绝对定位的画布，其宽度和高度相同（参阅github示例以获取更多信息）。</p><p>人脸识别</p><p>现在我们知道如何在给定输入图像的情况下检索所有人脸的位置和描述符，即，我们将得到一些图像，分别显示每个人并计算他们的人脸描述符。这些描述符将成为我们的参考数据。</p><p>假设我们有一些可用的示例图像，我们首先从url获取图像，然后使用faceapi.bufferToImage从其数据缓冲区创建HTML图像元素：</p><pre>// fetch images from url as blobs<br>const blobs = await Promise.all(<br> ['sheldon.png' 'raj.png', 'leonard.png', 'howard.png'].map(<br> uri => (await fetch(uri)).blob()<br> )<br>)<br>// convert blobs (buffers) to HTMLImage elements<br>const images = await Promise.all(blobs.map(<br> blob => await faceapi.bufferToImage(blob)<br>))<br></pre><p>接下来，对于每个图像，我们定位主体的面部并计算人脸描述符，就像我们之前在输入图像时所做的那样：</p><pre>const refDescriptions = await Promsie.all(images.map(<br> img => (await faceapi.allFaces(img))[0]<br>))<br>const refDescriptors = refDescriptions.map(fd => fd.descriptor)<br></pre><p>现在，我们要做的一切就是遍历输入图像的人脸描述，并在参考数据中找到距离最近的描述符：</p><pre>const sortAsc = (a, b) => a - b<br>const labels = ['sheldon', 'raj', 'leonard', 'howard']<br>const results = fullFaceDescription.map((fd, i) => {<br> const bestMatch = refDescriptors.map(<br> refDesc => ({<br> label: labels[i],<br> distance: faceapi.euclideanDistance(fd.descriptor, refDesc)<br> })<br> ).sort(sortAsc)[0]<br> <br> return {<br> detection: fd.detection,<br> label: bestMatch.label,<br> distance: bestMatch.distance<br> }<br>})<br></pre><p>如前所述，我们在此使用欧氏距离作为相似性度量，结果表明工作得很好。我们最终得到了在输入图像中检测到的每个人脸的最佳匹配。</p><p>最后，我们可以将边界框与标签一起绘制到画布中以显示结果：</p><pre>// 0.6 is a good distance threshold value to judge<br>// whether the descriptors match or not<br>const maxDistance = 0.6<br>results.forEach(result => {<br> faceapi.drawDetection(canvas, result.detection, { withScore: false })<br> <br> const text = `${result.distance < maxDistance ? result.className : 'unkown'} (${result.distance})`<br> const { x, y, height: boxHeight } = detection.getBox()<br> faceapi.drawText(<br> canvas.getContext('2d'),<br> x,<br> y + boxHeight,<br> text<br> )<br>})<br></pre><div class="pgc-img"><img class="lazy" data-original="http://p3.pstatp.com/large/pgc-image/1530177611916ca5ecd7cdf" img_width="1000" img_height="397" alt="JS使用者福音：在浏览器中运行人脸识别" inline="0"><p class="pgc-img-caption"></p></div><p>以上我希望你首先了解如何使用api。另外，我建议查看repo中的其他示例。</p><p>来自：ATYUN</p></div>
閱讀更多 AiTechYun 的文章
