web-dev-qa-db-ja.com

JavaScriptオブジェクトに画像を保存する

これが可能かどうかはわかりませんが、画像をJavaScript変数またはオブジェクトに保存し、ページが読み込まれたときに、それらの画像を必要な場所に表示したいです。

一部の画像がバイナリ形式に変換されているかどうかを知りたい。 JavaScriptで画像に戻すことはできますか？

javascripthtmlimagexhtml
27
user288134

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

50
Justin Johnson

単純に使用できます

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

dOMイメージを作成します。

DOMイメージは、イメージバイナリフォームを含むメモリ内のオブジェクトです。したがって、既にイメージになっているため、イメージに戻す必要はありません。

14
Luca Matteis

ほら、これは簡単なことです。しかし、この問題に取り組む方法は、あなたが今試みている方法ではありません。

あなたが働くと思うもの：
js変数に画像（そのバイナリデータ）を保存し、いつでもページ上で平手打ちします。

より簡単に機能する方法：
ページにDOMイメージを作成し、そのソースを設定するだけです。ブラウザは、サーバーから画像を自動的に取得します。

例：

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：（jqueryを使用）-これは本質的に上記と同じで、書くのがはるかに簡単です：

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

さて、もう1つあります。ブラウザが画像のフェッチを開始しますafterこのコードが実行されるため、実際にDOMに挿入すると画像が少し表示されます。

これを防ぐには、次を使用して画像をプリフェッチできます。

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

乾杯！

0
jrharshath