开发者

Embed external images for use in HTML canvas?

I'm using JavaScript to load an image into my Canvas element in Firefox. This works fine for local images, but throws a security exception for external images. Is there any way to avoid this security exception, one that does not involve my server having to act as proxy to load the image locally (because that would stress my server)?

PS: The current code is similar to this:

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


Actually it might be as well possible by utilizing XHR level 2 and UrlData. Check out my blog post.


This is doable for images under 25.6k in size. Use YQL's data:uri converter to grab the image and hand you back the base-64 encoded block. Then create an image in the client and set its source to the data you received from YQL. Example here:

http://kentbrewster.com/avatar-portraits

Here's a link to the right YQL data table.

[edited to fix; it's 25.6k, not 256]


I don't think this is possible, because this could open the browser to cross domain attacks.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜