时间戳

首页 > 解决方案 > 如何解决“画布被跨域数据污染”

javascript - 如何解决“画布被跨域数据污染”

问题描述

我在 youtube 上使用本教程中的 face_detection 库或 API https://www.youtube.com/watch?v=FfHilvUc25c 我尝试了同样的事情，但我收到错误，即画布已被跨源数据污染。我的 index.html 中没有画布。

  <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">

我期待在控制台中获得一个数组，但除了显示“未捕获的 DOMException：无法在 'CanvasRenderingContext2D' 上执行 'getImageData'：画布已被跨域数据污染”的错误外，什么都没有打印。

标签： javascriptface-detection

解决方案

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

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

推荐阅读