javascript - 受污染的 Canvas ，由于 CORS 和 SVG？

Question

我知道这个问题以前经常被问到，但在尝试解决这个问题 3 天后，我显然需要帮助。

我有一段时间了。我一直在尝试做这样的事情(这是一个简化的代码):

var media = Array();
$(document).ready(function(){
img = new Image();
img.crossOrigin = "*";
img.src = "http://domain.com/pics/picture.svg";
img.width = 200;
img.height = 300;
img.onload = function(){

    media['test'] = img;

    ///var layer = img;
    $.jCanvas({
        fromCenter: false
    });

    $("#collider").drawImage({
        source: media['test'],
        width: 200,
        height: 300,
        x: 0, y: 0,
        click: function(layer){
            alert(layer.eventX);
        }
    });


    var pixelData = document.getElementById("collider").getContext('2d').getImageData(50, 50, 20, 20).data;
    console.log(pixelData);//*/
}

});

问题是 Canvas 被污染了。因此，我无法获得任何像素数据。

我尝试在 .htaccess 中使用以下代码设置访问控制源 header :

# with AJAX withCredentials=false (cookies NOT sent)
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, PUT, OPTIONS, PATCH, DELETE"
Header always set Access-Control-Allow-Headers "X-Accept-Charset,X-Accept,Content-Type"

# with AJAX withCredentials=true (cookies sent, SSL allowed...)
SetEnvIfNoCase ORIGIN (.*) ORIGIN=$1
Header always set Access-Control-Allow-Methods "POST, GET, PUT, OPTIONS, PATCH, DELETE"
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Credentials "true"
Header always set Access-Control-Allow-Headers "X-Accept-Charset,X-Accept,Content-Type"

当我在浏览图像 URL 时检查浏览器中的 header 时，它们似乎在工作(所有 header 都按应有的方式发送)。但是当它们以某种方式通过 javascript 加载时它们不是(在浏览器中检查时根本没有发送 header )并且因此 Canvas 被污染

我的问题: 1) 为什么我的.htaccess 文件不允许跨域共享数据？ 2) 由于我的 html、javascript 和图像文件都托管在同一域中，为什么我什至会遇到跨源数据问题？

附加信息: 服务器:Ubuntu LTS 12.04，Apache2

编辑 我试图将 picture.svg 更改为 .jpg pic，现在一切正常，所以显然问题似乎来自包含的 .svg 文件。

有人知道如何使用 .svg 文件吗？

Answer 1

更新

错过了您使用的是 SVG 文件。如果 SVG 文件包含对外部资源(CSS、对象、图像等)的任何引用，它将不起作用。 SVG 中的所有内容都必须内联。否则您将遇到与直接使用外部资源相同的情况，但由于它们被封装在 SVG 中，因此浏览器更加严格，因此在这些情况下您不能使用 CORS。

这是浏览器的一项安全功能，您不能对其进行太多更改，但要确保嵌入 SVG 所需的所有资源。