Javascript 在Javascript对象存储图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2395765/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Store images in Javascript object
提问by user288134
I am not sure if this is possible, but I want to store an image in a JavaScript variable or an object and when the page loads, I want to make those images appear where desired.
我不确定这是否可行，但我想将图像存储在 JavaScript 变量或对象中，并且在页面加载时，我想让这些图像出现在所需的位置。
I want to know if some images are converted to binary form. Can they be converted back to images with JavaScript?
我想知道是否将某些图像转换为二进制形式。可以使用 JavaScript 将它们转换回图像吗？
回答by Justin Johnson
It appears that the OP is requesting how to do data islands in JavaScript, specifically for images. None of the answers previously given provide such a method, so here you go.
看来 OP 正在请求如何在 JavaScript 中创建数据岛，特别是对于图像。之前给出的答案都没有提供这样的方法，所以你去吧。
Basically, you encode the image as a base64 string and then set that as the source of a DOM element. Setting the source of an Imageobject to a url is not equivalent, since it requires an addition HTTP connection.
基本上，您将图像编码为 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;
The above code and a full example can be found here: http://www.kawa.net/works/js/data-scheme/base64-e.html
上面的代码和完整的例子可以在这里找到：http: //www.kawa.net/works/js/data-scheme/base64-e.html
回答by Luca Matteis
You can simply use
你可以简单地使用
var img = new Image();
img.src = "http://yourimage.jpg";
to create a DOM image.
创建一个DOM图像。
A DOM image is an object in memory that contains the image binary form, so there's no need to convert it back to an image since it's already one.
DOM 图像是内存中包含图像二进制形式的对象，因此无需将其转换回图像，因为它已经是图像了。
回答by jrharshath
See, this is a simple matter. But the method to approach this problem is not the way you are trying right now.
看，这是一件简单的事情。但是解决这个问题的方法不是你现在尝试的方式。
What you think will work:
We'll store the image (its binary data) in a js variable, and then slap it on the page any time.
您认为可行的方法：
我们将图像（其二进制数据）存储在一个 js 变量中，然后随时将其拍在页面上。
How it will work much more easily:
you just have to create a DOM image on the page, and set its source. The browser will fetch the image from the server automatically.
它将如何更轻松地工作：
您只需在页面上创建一个 DOM 图像，并设置其源。浏览器将自动从服务器获取图像。
Examples:
例子：
ex-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'>";
ex-2: (using jquery) - this is essentially the same as above, only much easier to write:
ex-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'>");
Now, there's one more thing: the browser starts fetching the image afterthis code runs, so the image actually appears a little after you insert it into the DOM.
现在，还有一件事：浏览器在此代码运行后开始获取图像，因此在将图像插入 DOM 后，图像实际上会出现一点。
To prevent this, you can pre-fetch the images using:
为了防止这种情况，您可以使用以下方法预取图像：
var prefetch = new Image();
prefetch.src = "http://someserver/yourimage.png";
Cheers!
干杯!
