从Javascript变量中的数据创建HTML图像

Question

我在Javascript变量中有图像数据（JPEG或PNG）。如何在HTML文档中显示图像？这些是非常大的图像，这样的代码不起作用，因为URI太长了：

// doesn't work because the URI is too long
$('img#target').attr('src', 'data:...');

使用canvas可能就是答案，但我无法弄清楚如何使用图像数据加载它。

如果你想知道：不，我不能直接将图像数据下载到img标签。它来自加密的服务器，并使用Javascript在浏览器中解密。

谢谢，
- Art Z。

Answer 1

使用数据网址在画布上绘图：

var img = new Image;
img.onload = function(){
  myCanvasContext.drawImage(img,0,0);
};
img.src = "data:...";

按this question/answer确保您在onload之前设置src。

你说“URI太长了”，但目前还不清楚你的意思。只有IE8对数据URI有32kB的限制;对于其他浏览器它应该工作正常。如果您遇到错误，请说明一下。

Answer 2

事实证明

$('img#target').attr('src', 'data:...');

除了IE之外，

在所有方面都有效。我的问题起源于其他地方。