将图像存储在Javascript对象中

Question

我不确定这是否可行,但我想将图像存储在JavaScript变量或对象中,当页面加载时,我想让这些图像出现在所需的位置.

我想知道一些图像是否转换为二进制形式.可以使用JavaScript将它们转换回图像吗？

Answer 1

OP似乎正在请求如何在JavaScript中执行数据孤岛,特别是图像.之前给出的答案都没有提供这样的方法,所以你走了.

基本上,您将图像编码为base64字符串,然后将其设置为DOM元素的源.将Image对象的源设置为url不等效,因为它需要额外的HTTP连接.

var data = 'data:image/gif;base64,'+
    'R0lGODlhAAEwAMQAAJ2M5Me98GRK1DoYyYBr3PHv++Pe99XO81Y50auc6PBkZEgpzbmt7HJa2I57'+
            // snip //
    'fS3CqU7XGYgE+GqHvrLJ8Tr6qXmqiwAF9CffgnMNqmWHAWNBwwGsKpKsrmJqltOOV69nuYxSkqpo'+
    'Tata18rWtrr1rTIIAQA7';
var icon_elem = document.getElementById("icon_here");
icon_elem.src = data;

上面的代码和完整的示例可以在这里找到:http://www.kawa.net/works/js/data-scheme/base64-e.html

Answer 2

你可以简单地使用

var img = new Image();
img.src = "http://yourimage.jpg";

创建DOM图像.

DOM图像是内存中包含图像二进制形式的对象,因此不需要将其转换回图像,因为它已经是图像.