为什么这个 Jsfiddle 不起作用：tracking.js 人脸检测示例答案

【问题标题】：Why is this Jsfiddle not working: tracking.js face detection example为什么这个 Jsfiddle 不起作用：tracking.js 人脸检测示例
【发布时间】：2015-07-19 08:46:19
【问题描述】：

我试图让http://trackingjs.com/examples/face_tag_friends.html 工作的 JSFiddle 示例工作，但悬停效果不像网站显示的那样工作。这是我的 JSFiddle：

https://jsfiddle.net/lolptdr/25yqfyjo/6/

我必须在 raw.githubusercontent.com 上使用代理并将其更改为 raw.githack.com，以便 HTML 中引用的外部脚本绕过 MIME 类型投诉。没有其他控制台错误，还有什么问题？

我还可以检查什么以获得与 trackingjs.com 网站上显示的相同的效果？

window.onload = function() {
  var img = document.getElementById('img');
  var tracker = new tracking.ObjectTracker('face');
  tracking.track(img, tracker);
  tracker.on('track', function(event) {
    event.data.forEach(function(rect) {
      plotRectangle(rect.x, rect.y, rect.width, rect.height);
    });
  });
  var friends = ['Thomas Middleditch', 'Martin Starr', 'Zach Woods'];
  var plotRectangle = function(x, y, w, h) {
    var rect = document.createElement('div');
    var arrow = document.createElement('div');
    var input = document.createElement('input');
    input.value = friends.pop();
    rect.onclick = function name() {
      input.select();
    };
    arrow.classList.add('arrow');
    rect.classList.add('rect');
    rect.appendChild(input);
    rect.appendChild(arrow);
    document.getElementById('photo').appendChild(rect);
    rect.style.width = w + 'px';
    rect.style.height = h + 'px';
    rect.style.left = (img.offsetLeft + x) + 'px';
    rect.style.top = (img.offsetTop + y) + 'px';
  };
};

* {
  margin: 0;
  padding: 0;
  font-family: Helvetica, Arial, sans-serif;
}
.demo-title {
  position: absolute;
  width: 100%;
  background: #2e2f33;
  z-index: 2;
  padding: .7em 0;
}
.demo-title a {
  color: #fff;
  border-bottom: 1px dotted #a64ceb;
  text-decoration: none;
}
.demo-title p {
  color: #fff;
  text-align: center;
  text-transform: lowercase;
  font-size: 15px;
}
.demo-frame {
  background: url(frame.png) no-repeat;
  width: 854px;
  height: 658px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -329px 0 0 -429px;
  padding: 95px 20px 45px 34px;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.demo-container {
  width: 100%;
  height: 530px;
  position: relative;
  background: #eee;
  overflow: hidden;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
.dg.ac {
  z-index: 100 !important;
  top: 50px !important;
}
/* example's CSS */

#photo:hover .rect {
  opacity: .75;
  transition: opacity .75s ease-out;
}
.rect:hover * {
  opacity: 1;
}
.rect {
  border-radius: 2px;
  border: 3px solid white;
  box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.3);
  cursor: pointer;
  left: -1000px;
  opacity: 0;
  position: absolute;
  top: -1000px;
}
.arrow {
  border-bottom: 10px solid white;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  height: 0;
  width: 0;
  position: absolute;
  left: 50%;
  margin-left: -5px;
  bottom: -12px;
  opacity: 0;
}
input {
  border: 0px;
  bottom: -42px;
  color: #a64ceb;
  font-size: 15px;
  height: 30px;
  left: 50%;
  margin-left: -90px;
  opacity: 0;
  outline: none;
  position: absolute;
  text-align: center;
  width: 180px;
  transition: opacity .35s ease-out;
}
#img {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -173px 0 0 -300px;
}

<script src="https://raw.githack.com/eduardolundgren/tracking.js/master/build/tracking.js"></script>
<script src="https://raw.githack.com/eduardolundgren/tracking.js/master/build/data/face.js"></script>
<div class="demo-title">
  <p><a href="http://trackingjs.com" target="_parent">tracking.js</a> － hover image to see all faces detected</p>
</div>
<div class="demo-frame">
  <div class="demo-container"> <span id="photo"><img id="img" src="https://raw.githubusercontent.com/eduardolundgren/tracking.js/master/examples/assets/faces.jpg" /></span>

  </div>
</div>

【问题讨论】：

标签： javascript computer-vision tracking.js

【解决方案1】：

这是一个快速的答案，但希望它能帮助您了解正在发生的事情。它失败了，因为代码正在尝试加载此资源：http://trackingjs.com/bower/tracking.js/examples/assets/frame.png

您可以看到它已加载到原始页面：http://trackingjs.com/examples/face_tag_friends.html 并且您可以看到您的 JSFiddle 也尝试加载它（尽管使用不同的主机，相同的相对路径）。当浏览器尝试 GET https://fiddle.jshell.net/25yqfyjo/7/show/frame.png 时，会发生 404，因为该文件不存在并且这会停止执行。

在运行 JSFiddle 时查看您的开发人员工具。我的猜测是，不应包含您加载的另一个脚本 (https://raw.githack.com/eduardolundgren/tracking.js/master/build/data/face.js)，它似乎是二进制数据（渲染图片）。相反，请浏览http://trackingjs.com/ 的基本文档并了解如何在您自己的照片上使用人脸检测。大概，它会更容易和工作。

【讨论】：

【解决方案2】：

跨域：我已更新您的代码以使用 DOMContentLoaded 并手动触发事件，以便您看到问题：https://jsfiddle.net/25yqfyjo/11/

所以我用

强制事件

// Create the event
var event = new CustomEvent("DOMContentLoaded", { "detail": "Content Loaded trigger" });

// Dispatch/Trigger/Fire the event
document.dispatchEvent(event);

您可以在控制台中看到错误：

未捕获的安全错误：无法执行“getImageData” 'CanvasRenderingContext2D'：画布已被跨域

data.tracking.trackCanvasInternal_@

tracking.js:196(匿名函数)@

tracking.js:221img.onload @

tracking.js:472

这是由于您将图像从另一个 URL 加载到您的代码正在使用的画布中（即使您看不到它，var tracker = new tracking.ObjectTracker('face'); 将使用画布）我认为出于以下目的JS Fiddle 您可以将图像更改为 Base64 编码，这样可以解决问题。

【讨论】：

【解决方案3】：

您将需要更多操作：

首先打开开发者工具 F12 (chrome) goto tab console switch frame to：

现在您可以跟踪您的代码。我发现你的 js 代码看起来像你使用的 window.onload 无论如何都不重要。（标签中断）。您在代码加载事件中有更多时间。每次调用 window.onload=SOMETHING 时，都会覆盖此函数。 window.onload 是只执行一次的函数。只需加载文件。这不是 JQ 。

你也有：

GET https://fiddle.jshell.net/lolptdr/25yqfyjo/6/show/frame.png 404 (Not Found)

这是 js 的命名空间 { } ，如果你有这样的错误。

{
exeOK()
IamError() ; BREAKS HERE 
IneverLoaded()
}

这也可以是您的解决方案：检查调试器是否将js代码加载到最后。

【讨论】：

【解决方案4】：

以上所有答案都说明了为什么这会失败，但这里有一个使用 flickr 图像的 jsfiddle 中的 tracker.js 的工作示例： http://jsfiddle.net/rambutan2000/v5v49bax/

Flickr 似乎在标题中正确设置了 Access-Control-Allow-Origin。我使用代理 (crossorigin.me) 的成功有限。

这是此示例的简化版本： https://trackingjs.com/examples/face_hello_world.html

首先，我必须获取 Tracker 包含的有效 URL，我使用了以下服务： http://rawgit.com。查看 jsfiddle 中的“外部资源”。

我基于一个示例，该示例使用 XMLHttpRequest 检索图像数据作为缓冲区，然后将其加载到 img 元素中。这消除了 img 元素上的一些 CORS 问题，因为它来自代码而不是 URL。其余部分直接来自上面引用的 Tracker 示例。

JS：

// use http://rawgit.com/ to get js urls from github
// use https://crossorigin.me/ to get around CORS for image reference
function _arrayBufferToBase64(buffer) {
    var binary = ''
    var bytes = new Uint8Array(buffer)
    var len = bytes.byteLength;
    for (var i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i])
    }
    return window.btoa(binary);
}

window.plot = function(x, y, w, h) {
    var $rect = $("<div></div>");
    $rect.addClass("rect");
    $rect.offset({ top: y, left: x });
    $rect.width(w).height(h);    
    $("#demo-container").append($rect);    
};

var imgURL = 'https://c1.staticflickr.com/4/3943/15715482121_d7120a6e0b_z.jpg';  // Works!
//var imgURL = 'https://placeimg.com/640/480/people'; // Does not work
//var imgURL = 'https://crossorigin.me/https://placeimg.com/640/480/people'; // Works!


var oReq = new XMLHttpRequest();
oReq.open("GET", imgURL, true);
oReq.responseType = "arraybuffer";

oReq.onload = function (oEvent) {
    var arrayBuffer = oReq.response; // Note: not oReq.responseText
    if (arrayBuffer) {
        var x = imgURL.split('.');
        var ext = x[x.length - 1];
        var b64img = _arrayBufferToBase64(arrayBuffer);
        $("#img").attr('src', 'data:image/' + ext + ';base64,' + b64img).appendTo($('body'));        

        var img = document.getElementById('img');
        var tracker = new tracking.ObjectTracker(['face']);

        tracker.setStepSize(1.7);
                tracking.track('#img', tracker);

        tracker.on('track', function(event) {        
            event.data.forEach(function(rect) {
                console.log(rect);
              window.plot(rect.x, rect.y, rect.width, rect.height);
            });
        });
    }
};

oReq.send(null);

HTML：

<div id="demo-container">
  <img id="img" src="" />
</div>

CSS：

.rect {
  position:absolute;
  border-style: solid;
  border-width: 2px;
  border-color: blue;
}

#demo-container {
  position:absolute;
}

【讨论】：