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

Question

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

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

使用画布可能是答案，但我不知道如何用图像数据加载它。

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

谢谢，
-- 艺术 Z。

Answer 1

原来是这样的

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

在除 IE 之外的所有应用程序中都有效。我的问题源于其他地方。

Answer 2

使用数据 URL 在画布上绘图：

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

根据this question/answer，请务必在src 之前设置onload。

您说“URI 太长”，但不清楚您的意思是什么。只有 IE8 对数据 URI 有 32kB 的限制；对于其他浏览器，它应该可以正常工作。如果您遇到错误，请描述它。