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

前端之家收集整理的这篇文章主要介绍了从Javascript变量中的数据创建HTML图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个 JavaScript变量中的图像数据(JPEG或PNG).如何在HTML文档中显示图像?这些是非常大的图像,并且这样的代码不起作用,因为URI太长:
// doesn't work because the URI is too long
$('img#target').attr('src','data:...');@H_502_3@ 
 

使用画布可能是答案,但我无法弄清楚如何使用图像数据加载它.

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

谢谢,
– 艺术

解决方法

要使用数据URL在画布上绘制:
var img = new Image;
img.onload = function(){
  myCanvasContext.drawImage(img,0);
};
img.src = "data:...";@H_502_3@ 
 

根据this question/answer确保您在src之前设置了负载.

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

猜你在找的JavaScript相关文章