受感染的canvas，由于CORS和SVG？

我知道这个问题以前经常被问到，但是经过三天试图解决这个问题我显然需要帮助。

我现在有一个问题了。 我一直试图做这样的事情（这是一个简化的代码）：

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

为什么我的.htaccess文件redirect到完整的服务器path而不是相对path？

如何在PHP上启用shell_exec和exec？

Apache Shiro EhCache初始化exception：另一个未命名的CacheManager已存在于同一个VM中

$ _SERVER 和$ _SERVER 有什么区别？

没有wwwredirecthtaccess的问题

# 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,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,Content-Type"

而当我浏览图片的url时，浏览器中的标题，他们似乎正在工作（所有标题发送，因为他们应该）。 但是，当他们通过JavaScript加载不知何故（当在浏览器中检查时，根本没有发送头文件），并且因为canvas受到污染

我的问题：1）为什么我的.htaccess文件不能跨数据共享？ 2）为什么我甚至有交叉源数据的问题，因为我的HTML，JavaScript和图像文件托pipe在同一个域？

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

编辑我试图改变picture.svg到.jpg图片，而现在一切正常，所以显然这个问题似乎是从包含的.svg文件派生。

任何人都知道如何使用.svg文件做到这一点？

我将如何在.htaccess文件中编写if – elseif – elseif条件块？

我如何将SCRIPT_URI写入Apache的头文件？

删除我的htacess双重301redirect？

Apache的HtAccess的AddHandler有条件的服务器名称或IP

Apache PDFBox Java库 – 是否有创build表的API？

更新

错过了你正在使用SVG文件。 如果SVG文件包含对外部源（CSS，对象，图像等）的引用，则不起作用。 SVG中的所有内容都必须内联。 否则你将会和直接使用外部资源的情况一样，但是因为它们被封装在SVG中，所以浏览器更加严格，所以在这种情况下你不能使用CORS。

这是浏览器的一个安全特性，你不能做太多的改变，但要确保SVG所需要的所有资源都被嵌入了。

正如指出的那样。 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,20).data; console.log(pixelData);