被污染的帆布​​，由于CORS和SVG？ [英] Tainted Canvas, due to CORS and SVG?

问题描述

Iknow这常常被问过，但经过3天试图解决这一问题显然我需要帮助。

Iknow this has been asked often before, but after 3days trying to fix this i clearly need help.

我现在已经有一段时间的一个问题。我一直试图做这样的事情（这是一个简化的code）：

I've had a problem for a while now. I been trying to do something like this (This is a simplified code):

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

});

的问题是，在画布被污染了。正因为如此，我不能得到任何的像素数据。

The problem is that the canvas gets tainted. Because of that I can't get any pixel data.

我试过用在.htaccess以下code设置访问控制原点头：

I've tried to set the access control origin headers with the following code in .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"

当我浏览到图像URL时，在浏览器中检查了头，他们似乎是工作（所有标头，因为他们应该发送）。但是，当他们通过JavaScript不知何故，他们不（无头在所有发送，浏览器检查时）加载，因为这个帆布被污染

And when i checked the headers in the browser when surfing to the image URL, they seemed to be working(All headers are sent as they should) . But when they are loaded via javascript somehow they aren't(No headers are sent at all, when inspected in browser) and because of that the canvas gets tainted

我的问题：
1）为什么我的.htaccess文件允许数据的交叉渊源考共享？
2）为什么我甚至有因为这两个我的HTML跨域数据，JavaScript和图像文件在同一域所承载的问题？

My questions: 1) Why doesn't my .htaccess file allow cross-orgin sharing of data? 2) Why do i even have a problem with cross-origin data since both my html, javascript and image file are hosted on the same domain?

附加信息：
服务器：Ubunthu 12.04 LTS，Apache2的

Additional info: Server: Ubunthu LTS 12.04, Apache2

修改
我试图改变picture.svg为​​.jpg格式图片，而不是现在一切正常，那么显然这个问题似乎从所包含的.svg文件导出。

EDIT I tried to change picture.svg to a .jpg pic instead and now everything works, so apparently the problem seems to derive from the included .svg file.

任何人都知道如何与.SVG文件做到这一点？

Anyone that know how to do this with .svg files?

推荐答案

随着指出。 SVG图像可以玷污画布。即使某个时候（就像在我的情况）时，SVG文件没有外部资源。

As pointed out. SVG images can taint the canvas. Even sometime (Like in my case) when the SVG file has no external resources.

但是我找到一个解决方案，以便能仍然没有污点画布中使用的SVG格式的功能。

But i found one solution so the features of the SVG format could still be used without tainting the canvas.

这是可能的canvg（ HTTP：//$c$c.google.com/ p / canvg / ）。该脚本还声称能够得到使用藏汉CORS的SVG（我没有带测试了尚未虽然）

It's possible with canvg (http://code.google.com/p/canvg/). That script also claims to be able to get the SVG using CORS aswell (I havn't tested that yet though)

希望这可以帮助别人！

code例如

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

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

这篇关于被污染的帆布​​，由于CORS和SVG？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！