受污染的画布，由于 CORS 和 SVG? [英] Tainted Canvas, due to CORS and SVG?

问题描述

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

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

我现在遇到了一个问题.我一直在尝试做这样的事情(这是一个简化的代码):

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 中使用以下代码设置访问控制源头:

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?

附加信息:服务器:Ubuntu LTS 12.04，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://code.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)

希望这对某人有所帮助！

Hope this helps someone!

代码示例

//...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屋！