我不确定这是否可能,但我想将图像存储在JavaScript变量或对象中,当页面加载时,我希望这些图像出现在所需位置。
我想知道是否有些图像被转换为二进制形式。它们能否用JavaScript转换回图像?
我不确定这是否可能,但我想将图像存储在JavaScript变量或对象中,当页面加载时,我希望这些图像出现在所需位置。
我想知道是否有些图像被转换为二进制形式。它们能否用JavaScript转换回图像?
看起来,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
你可以简单地使用
var img = new Image();
img.src = "http://yourimage.jpg";
创建一个DOM图像。
DOM图像是内存中包含图像二进制形式的对象,因此无需将其转换回图像,因为它已经是一个图像。
看,这是一个简单的问题。但是解决这个问题的方法并不是你现在尝试的方式。
你认为会起作用的方法:
我们将图像(其二进制数据)存储在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'>");
var prefetch = new Image();
prefetch.src = "http://someserver/yourimage.png";
干杯!