嵌入外部图像以在HTML画布中使用？

Question

我正在使用JavaScript将图像加载到Firefox中的Canvas元素中。这适用于本地图像，但会为外部图像抛出安全例外。有没有办法避免这个安全异常，一个不涉及我的服务器必须作为代理在本地加载图像（因为这会给我的服务器带来压力）？

PS：当前代码与此类似：

var img = new Image();
var contextSource = canvasSource.getContext('2d');
contextSource.drawImage(img, 0, 0);
// get image data to do stuff with pixels
var imageDataSource = contextSource.getImageData(0, 0, width - 1, height - 1);

Answer 1

实际上，通过使用XHR级别2和UrlData可能也是如此。查看my blog post。

Answer 2

这适用于尺寸小于25.6k的图像。使用YQL的数据：uri转换器可以抓取图像并将基数为64的编码块移回原处。然后在客户端中创建一个映像，并将其源设置为从YQL收到的数据。示例：

http://kentbrewster.com/avatar-portraits

这是指向右YQL data table的链接。

[编辑修复;这是25.6k，而不是256]

Answer 3

我认为这不可行，因为这可能会打开浏览器以跨域攻击。