如何解决"Canvas is tainted by cross-origin data"

Question

我正在使用 face_detection 库或来自 youtube 上本教程的 API https://www.youtube.com/watch?v=FfHilvUc25c 我已经尝试过同样的事情，但我收到 canvas 已被跨源数据污染的错误。我的index.html.

里没有canvas

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="jquery.facedetection.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#picture').faceDetection({
                complete: function (faces) {
                    console.log(faces);
                }
            });
        })
    </script>

  <img id="picture" src="img/face1.jpg">

我期待在控制台中得到一个数组，但除了 "Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data."

的错误外，没有打印任何内容

Answer 1

当您加载要在 canvas 上使用的纹理或图像时，其来源需要可信且安全，以防止滥用 canvas 的内部结构。为了实现这一点，您需要从同一域提供您的文件，或确保其他服务器通过 CORS header 正确传达其意图。如果您尝试从不安全的来源绘制图像，canvas 将被污染并且无法再从中读取任何图像数据。

您可以使用本地服务器（如 MAMP，如果您需要 GUI，否则节点中的 browsersync 服务器就可以）来访问和操作托管在同一服务器上的文件。还有更多，但请查看有关此现象的 MDN 文档：https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

如何解决"Canvas is tainted by cross-origin data"

How to solve "Canvas is tainted by cross-origin data"

javascript

face-detection