web-dev-qa-db-ja.com

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

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...";

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

javascriptbase64background-image
51
Igor Savinkin

私はあなたと同じことをしようとしましたが、明らかに、背景画像はエンコードされたデータでは動作しません。別の方法として、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/

60
Ezequiel Gorbatik

これを試してください、私は成功応答を持っています..それは働いています

$("#divId").css("background-image", "url('data:image/png;base64," + base64String + "')");
24
gihansalith

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 Dev 37およびChrome 40でテスト済み。

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

編集

さらに調査しました。エンコードされた値に改行が含まれているために、（少なくとも私の場合は）base64エンコードが（少なくとも私の場合は）中断することがあります（この場合、値はActionScriptによって動的に生成されました）。

単に使用する：

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

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

18
lutogniew

ガブリエルガルシアの次のソリューションにこのトリックを追加する-

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

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

var img = "url('data:image/png;base64, "+base64Data + "')";
document.body.style.backgroundImage = img;
6
Amit Kumar Rai

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

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)
4
gabriel garcia

これは、純粋な呼び出しを行う正しい方法です。 CSSなし。

<div style='background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAFCAYAAABW1IzHAAAAHklEQVQokWNgGPaAkZHxPyMj439sYrSQo51PBgsAALa0ECF30JSdAAAAAElFTkSuQmCC)repeat-x center;'></div>
2
user5641497

私が通常行うことは、次のように最初に変数に完全な文字列を保存することです：

<?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
user1263254

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

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

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

element.style.backgroundImage=""

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

element.style.backgroundImage="some base64 data"

Jqueryは正常に動作します。

0
stlebeax

これが役立つと思います

url = "data:image;base64,"+data.replace(/(\r\n|\n|\r)/gm, "");
$("body").css("background-image", "url('" + url.replace(/(\r\n|\n|\r)/gm, "") + "')");
0
Rami Mohammed