javascript - 形状检测 API : "DOMException: Source would taint origin"

Question

我正在玩形状检测 API ( https://github.com/WICG/shape-detection-api )，基于以下示例:https://wicg.github.io/shape-detection-api/#examples

我正在尝试让最简单的工作:

let faceDetector = new FaceDetector({fastMode: true, maxDetectedFaces: 1});
// Assuming |theImage| is e.g. a <img> content, or a Blob.

faceDetector.detect(theImage)
.then(detectedFaces => {
  for (const face of detectedFaces) {
    console.log(' Face @ (${face.boundingBox.x}, ${face.boundingBox.y}),' +
    ' size ${face.boundingBox.width}x${face.boundingBox.height}');
  }
}).catch(() => {
  console.error("Face Detection failed, boo.");
})

但是，我收到错误:

VM153:1 Uncaught (in promise) DOMException: Source would taint origin.

我正在使用的图像变量是来自 stackoverflow 的图像之一:

<img src="https://www.gravatar.com/avatar/619aaf27f793d8ffdbc879c74884c0cc?s=32&amp;d=identicon&amp;r=PG" alt="" width="32" height="32" id="testimg">

我的浏览器是 Google Chrome Canary 61.0.3128.0，启用了实验性 Web 功能。

我错过了什么吗？

Answer 1

答案在这里: https://wicg.github.io/shape-detection-api/#image-sources-for-detection

"If any ImageBitmapSource have an effective script origin (HTML Standard §concept-origin) which is not the same as the Document’s effective script origin, then reject the Promise with a new DOMException whose name is SecurityError."

如果您使用通过 HTML 标记加载图像，请不要错过包装代码

window.onload = () => {
    // TODO: put you code here 
};

或通过图像构造器

let image = new Image();
image.src = 'faces.jpg'
image.onload = () => {
    // TODO: put your code here
}

Code example