在Javascript对象中存储图片

Question

我不确定这是否可能，但我想将图像存储在JavaScript变量或对象中，当页面加载时，我希望这些图像出现在所需位置。

我想知道是否有些图像被转换为二进制形式。它们能否用JavaScript转换回图像？

- user288134

---

我认为这是不可能的，尽管Luca的方法可以用来创建对象，但该对象只包含图像的位置而不是图像本身。 - Praveen Prasad

其中包含对图像本身的引用。 - Luca Matteis

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

- Justin Johnson

Answer 2

你可以简单地使用

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

创建一个DOM图像。

DOM图像是内存中包含图像二进制形式的对象，因此无需将其转换回图像，因为它已经是一个图像。

- Luca Matteis

---

谢谢回复，但我的需求限制了我只能使用绝对/相对路径引用图像。 可以这样想，我想以某种方式将图像存储在HTML页面本身中。 我不确定这是否可能。 - user288134

唯一引用图像的方式是通过路径。你还有什么其他方法可以获取图像呢？ - Luca Matteis

因为在您的情况下并且假设浏览器不缓存，每次将URL分配给src然后放入DOM中，这不会需要隐式重新加载吗？ - Mohammed Joraid

@MohammedJoraid 不会重新加载。当DOM图像被分配一个src时，它会被加载，随后在DOM中将相同的src分配给img标签不会导致重新加载。 - Oscar Barrett

Answer 3

看，这是一个简单的问题。但是解决这个问题的方法并不是你现在尝试的方式。

你认为会起作用的方法：
我们将图像（其二进制数据）存储在js变量中，然后随时将其放在页面上。

更容易的方法是：
您只需在页面上创建一个DOM图像，并设置其源。浏览器将自动从服务器获取图像。

示例：

示例1：

var img_src = "http://someserver/yourimage.png";
var node = document.getElementById('the-node-in-which-i-want-my-image');
node.innerHTML = "<img src='"+img_src+"' alt='my image'>";

示例2：（使用jQuery）- 本质上与上面相同，只是要容易得多：

var img_src = "http://someserver/yourimage.png";
$('#the-node-in-which-i-want-my-image')
    .html("<img src='"+img_src+"' alt='my image'>");

现在，还有一件事情：浏览器会在这段代码运行之后开始获取图像，因此实际上图像会稍后出现在DOM中。

为了防止这种情况，您可以使用以下代码进行预获取图片：

var prefetch = new Image();
prefetch.src = "http://someserver/yourimage.png";

干杯！

- jrharshath