background-imageをbase64でエンコードされた画像として設定する方法はありますか？

84

JSで背景を動的に変更したいのですが、画像のセットはbase64でエンコードされています。私は試してみます：

document.getElementById("bg_image").style.backgroundImage = 
   "url('http://amigo.com/300107-2853.jpg')";

完璧な結果で、

それでも私は同じことをすることができません： 

document.getElementById("bg_image").style.backgroundImage = 
   "url('data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAYAAAAUYybjAAAgAElE...')";

また 

document.getElementById("bg_image").style.backgroundImage = 
   "data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAYAAAAUYybjAAAgAElE...";

それを行う方法はありますか？

javascript  base64  background-image 
— イゴール・サビンキン
ソース
url('動作するはずですが、私の問題は、ActionScript dataURLに実際に改行が含まれていることでした。そして、私はそうしなければなりませんでしたreplace(/\n/g, '')
— neaumusic 2017年

回答:

91

私はあなたと同じことをしようとしましたが、どうやらbackgroundImageはエンコードされたデータでは機能しません。別の方法として、CSSクラスとそれらのクラス間の変更を使用することをお勧めします。

「オンザフライ」でデータを生成している場合は、CSSファイルを動的にロードできます。

CSS：

.backgroundA {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDUxRjY0ODgyQTkxMTFFMjk0RkU5NjI5MEVDQTI2QzUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDUxRjY0ODkyQTkxMTFFMjk0RkU5NjI5MEVDQTI2QzUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpENTFGNjQ4NjJBOTExMUUyOTRGRTk2MjkwRUNBMjZDNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpENTFGNjQ4NzJBOTExMUUyOTRGRTk2MjkwRUNBMjZDNSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuT868wAAABESURBVHja7M4xEQAwDAOxuPw5uwi6ZeigB/CntJ2lkmytznwZFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYW1qsrwABYuwNkimqm3gAAAABJRU5ErkJggg==");
}

.backgroundB {
    background-image:url("data:image/gif;base64,R0lGODlhUAAPAKIAAAsLav///88PD9WqsYmApmZmZtZfYmdakyH5BAQUAP8ALAAAAABQAA8AAAPbWLrc/jDKSVe4OOvNu/9gqARDSRBHegyGMahqO4R0bQcjIQ8E4BMCQc930JluyGRmdAAcdiigMLVrApTYWy5FKM1IQe+Mp+L4rphz+qIOBAUYeCY4p2tGrJZeH9y79mZsawFoaIRxF3JyiYxuHiMGb5KTkpFvZj4ZbYeCiXaOiKBwnxh4fnt9e3ktgZyHhrChinONs3cFAShFF2JhvCZlG5uchYNun5eedRxMAF15XEFRXgZWWdciuM8GCmdSQ84lLQfY5R14wDB5Lyon4ubwS7jx9NcV9/j5+g4JADs=");
}

HTML：

<div id="test" height="20px" class="backgroundA"> 
  div test 1
</div>
<div id="test2" name="test2" height="20px" class="backgroundB">
  div test2
</div>
<input type="button" id="btn" />

Javascript：

function change() {
    if (document.getElementById("test").className =="backgroundA") {
        document.getElementById("test").className="backgroundB";
        document.getElementById("test2").className="backgroundA";
    } else {
        document.getElementById("test").className="backgroundA";
        document.getElementById("test2").className="backgroundB";
    }
}

btn.onclick= change;

ここでいじって、ボタンを押すと、divの背景が切り替わります：http：//jsfiddle.net/egorbatik/fFQC6/

— エゼキエル・ゴルバティック
ソース
ありがとうございますが、私は大量の要素を扱っているので、クラスを交換するのは現実的ではありません。
— Igor Savinkin 2013年
1
@IgorSavinkinと将来これを読む人。多数の要素を同時に同じ背景に変更する場合は、cssを使用して、変更する各要素に対してクラスを配置し、共通の祖先要素のクラスを変更することで、レンダリングをカスケードできます。たとえば、CSSがあろう#ancestor.backgroundA .Change{background-image:...}と#ancestor.backgroundB .Change{background-image...}、ここで#ancestor共通の祖先のIDであり、.Change背景のいずれかを適用する先のすべての要素に適用されるクラスです。
— Patanjali 2016年
百万のクラスでcssを作成するのが良い習慣であるかどうかを考える前に、誰もがこの回答を最良と投票するのを見るのはおかしいです...またはさらに良い：百万のbase64エンコード画像を含むcss（ヒント：考えてみてください百万のHD、画像が含まれているフォルダ）。しかし、ええ、これはいくつかの画像で機能します。
— ガブリエルガルシア
また、システムで使用可能なイメージに新しいイメージを追加する問題をどのように解決しますか？このアプローチはさらにスケーラブルですか？
— ガブリエルガルシア
32

base64でも同じ問題がありました。同じ問題を抱えている将来の人のために：

url = "data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAYAAAAUYybjAAAgAElE...";

これはコンソールから実行されますが、スクリプト内からは機能しません。

$img.css("background-image", "url('" + url + "')");

しかし、少し遊んだ後、私はこれを思いついた：

var img = new Image();
img.src = url;
$img.css("background-image", "url('" + img.src + "')");

プロキシイメージで機能する理由はわかりませんが、機能します。Firefox Dev37およびChrome40でテスト済み。

それが誰かを助けることを願っています。

編集

もう少し調査しました。エンコードされた値（私の場合、値はActionScriptによって動的に生成された）に改行が存在するため、base64エンコード（少なくとも私の場合）がCSSで壊れることがあるようです。

単に例を使用して：

$img.css("background-image", "url('" + url.replace(/(\r\n|\n|\r)/gm, "") + "')");

動作し、プロキシイメージを使用するよりも数ミリ秒速いようです。

— ルトグニエフ
ソース
2
改行を削除すると、修正されました。
— エヴァン
良い調査。
— 解決Tornøe
31

これを試してみてください、私は成功の応答を得ました..それは働いています

$("#divId").css("background-image", "url('data:image/png;base64," + base64String + "')");
— ギハンサリス
ソース
場合思えるdata:image/png;base64の長さで、文字列はjqueryの変数として定義し、その後、仕事をしません。しかし、文字列がPHClausの例のようにphp変数として定義されている場合は機能します。テストした内容に関する情報
— Andris
12

このトリックをガブリエルガルシアの次の解決策に追加する- 

var img = 'data:image/png;base64, ...'; //place ur base64 encoded img here
document.body.style.backgroundImage = 'url(' + img + ')';

しかし、私の場合、これは機能していませんでした。urlをimg変数に移動することでうまくいきました。したがって、最終的なコードは次のようになります

var img = "url('data:image/png;base64, "+base64Data + "')";
document.body.style.backgroundImage = img;
— アミット・クマール・ライ
ソース
1
@アミットクマーライあなたが正しいです。コードが機能するように実際に記述したコードに一重引用符がありませんでした。
— ガブリエルガルシア2017年
7

私はこれを試しました（そして私のために働きました）：

var img = 'data:image/png;base64, ...'; //place ur base64 encoded img here
document.body.style.backgroundImage = 'url(\'' + img + '\')';

ES6構文：

let img = 'data:image/png;base64, ...'
document.body.style.backgroundImage = ´url('${img}')´

少し良く：

let setBackground = src=>{
    this.style.backgroundImage = `url('${src}')`
}

let node = nodeIGotFromDOM, img = imageBase64EncodedFromMyGF
setBackground.call(node, img)
— ガブリエルガルシア
ソース
1
これはまさに人々が言っ​​ているコードなので、おかしいです。
— Pimp Trizkit 2017
これは私にも有効です。マイクロソフトエッジおよびIE 11でテストだけでなく
— Ryan.C
2

私が通常行うことは、次のように、最初に文字列全体を変数に格納することです。

<?php
$img_id = 'data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAY...';
?>

次に、どちらかのJSにその変数を使用して何かを実行させたい場合：

<script type="text/javascript">
document.getElementById("img_id").backgroundImage="url('<?php echo $img_id; ?>')";
</script>

次のようなものを使用して、PHP経由で同じ変数を直接参照できます。

<img src="<?php echo $img_id; ?>">

私のために働く;）

2

これは純粋な電話をかける正しい方法です。CSSはありません。

<div style='background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAFCAYAAABW1IzHAAAAHklEQVQokWNgGPaAkZHxPyMj439sYrSQo51PBgsAALa0ECF30JSdAAAAAElFTkSuQmCC)repeat-x center;'></div>
— user5641497
ソース
<DIVのスタイル= '背景：URL（データ：画像/ PNG、BASE64、iVBORw0KGgoAAAANSUhEUgAAABwAAAAFCAYAAABW1IzHAAAAHklEQVQokWNgGPaAkZHxPyMj439sYrSQo51PBgsAALa0ECF30JSdAAAAAElFTkSuQmCC）リピート-X中心;'> </ div>
— user5641497
コードを投稿するには、4つのスペースでインデントするか、コードを選択してCtrl-Kを押します。
2

これは役立つと思います。Base64は別の方法でCSSによってアドレス指定されます。画像のデータ型をbase64に設定する必要があります。これは、CSSがbase64を画像に変更してユーザーに表示するのに役立ちます。jqueryスクリプトを使用して背景画像を割り当てることにより、javascriptからこれを使用できます。これにより、base64が自動的にmageに変更され、表示されます。

url = "data:image;base64,"+data.replace(/(\r\n|\n|\r)/gm, "");
$("body").css("background-image", "url('" + url.replace(/(\r\n|\n|\r)/gm, "") + "')");
スニペットを展開

— ラミ・モハメッド
ソース
コードのみの回答はお勧めしません。[編集]をクリックして、コードが質問にどのように対処しているかを要約する単語を追加するか、回答が以前の回答とどのように異なるかを説明してください。これと以前に投稿された回答の1つとの間に実際の違いはわかりません。
— ニック
0

私の場合、とを設定しなかったheightからwidthです。

しかし、別の問題があります。

背景画像は、を使用して削除できます

element.style.backgroundImage=""

しかし、を使用して設定できませんでした

element.style.backgroundImage="some base64 data"

Jqueryは正常に動作します。

— stlebeax
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.