从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

要使用数据URL在画布上绘制:

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

根据这个问题/答案,请确保在onload之前设置src.

你说"URI太长了",但你不清楚这是什么意思.只有IE8对数据URI有32kB的限制; 对于其他浏览器它应该工作正常.如果您遇到错误,请说明.