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);//*/
}

});

问题是画布受到污染。因为我无法获得任何像素数据。

我尝试使用.htaccess中的以下代码设置访问控制原始标头：

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

当我在浏览图片网址时检查浏览器中的标题时，它们似乎正在工作（所有标题都按照应有的方式发送）。但是当它们通过javascript加载它们时它们不是（在浏览器中检查时根本没有发送标题）并且因为画布被污染了

我的问题： 1）为什么我的.htaccess文件不允许交叉共享数据？ 2）为什么我的跨域数据都有问题，因为我的html，javascript和图像文件都托管在同一个域中？

其他信息：服务器：Ubunthu LTS 12.04，Apache2

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

任何知道如何使用.svg文件执行此操作的人？

Answer 1

<强>更新

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

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

Answer 2

指出。 SVG图像可以污染画布。甚至有时候（就像我的情况一样）当SVG文件没有外部资源时。

但是我找到了一个解决方案，因此仍然可以使用SVG格式的功能而不会污染画布。

可以使用canvg（http://code.google.com/p/canvg/）。该脚本还声称能够使用CORS获取SVG（尽管我还没有测试过）

希望这有助于某人！

代码示例

//...prev code
canvg(document.getElementById('collider'), media['test']);

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

Tainted Canvas，归功于CORS和SVG？

2 个答案: