Gibt es eine Möglichkeit, das Hintergrundbild als base64-codiertes Bild festzulegen?

84

Ich möchte den Hintergrund in JS dynamisch ändern und meine Bilder sind in Base64-codiert. Ich versuche:

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

mit perfektem Ergebnis,

Trotzdem mache ich nicht dasselbe mit: 

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

Noch 

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

Gibt es eine Möglichkeit, dies zu tun?

javascript base64 background-image Igor Savinkin
quelle
url('sollte funktionieren, mein Problem war, dass die ActionScript dataURL tatsächlich Zeilenumbrüche hatte, und ich musstereplace(/\n/g, '')
neaumusic

Antworten:

91

Ich habe versucht, dasselbe wie Sie zu tun, aber anscheinend funktioniert backgroundImage nicht mit verschlüsselten Daten. Als Alternative schlage ich vor, CSS-Klassen und den Wechsel zwischen diesen Klassen zu verwenden.

Wenn Sie die Daten "on the fly" generieren, können Sie die CSS-Dateien dynamisch laden.

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;

Ich habe hier herumgespielt, den Knopf gedrückt und es wird den Hintergrund der Divs wechseln: http://jsfiddle.net/egorbatik/fFQC6/

Ezequiel Gorbatik
quelle
danke, aber ich arbeite mit einer großen Menge von Elementen, so dass es nicht praktisch ist, Klassen auszutauschen.
Igor Savinkin
1
@IgorSavinkin und wer auch immer dies in der Zukunft liest. Wenn Sie viele Elemente gleichzeitig auf denselben Hintergrund ändern, können Sie das Rendern mithilfe von CSS kaskadieren, indem Sie für jedes Element, das geändert werden soll, eine Klasse einfügen, aber die Klasse eines gemeinsamen Vorfahrenelements ändern. Zum Beispiel wäre das CSS #ancestor.backgroundA .Change{background-image:...}und #ancestor.backgroundB .Change{background-image...}, wo #ancestorist die ID des gemeinsamen Vorfahren, und .Changeist die Klasse, die auf alle Elemente angewendet wird, auf die einer der Hintergründe angewendet werden soll.
Patanjali
Es ist lustig zu sehen, dass jeder diese Antwort als die beste bewertet, bevor er überhaupt darüber nachdenkt, ob es eine gute Praxis wäre, ein CSS mit einer Million Klassen zu erstellen ... oder noch besser: ein CSS mit einer Million Base64-codierten Bildern (Tipp: Denken Sie nur daran ein Ordner mit einer Million vielleicht HD, Bilder darin). Aber ja, das funktioniert für ein paar Bilder.
Gabriel Garcia
Wie würden Sie das Problem des Hinzufügens neuer Bilder zu den vom System verfügbaren Bildern lösen? Ist dieser Ansatz überhaupt skalierbar?
Gabriel Garcia
32

Hatte das gleiche Problem mit base64. Für alle in der Zukunft mit dem gleichen Problem:

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

Dies würde über die Konsole ausgeführt, jedoch nicht über ein Skript:

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

Aber nachdem ich ein bisschen damit gespielt hatte, kam ich auf Folgendes:

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

Keine Ahnung, warum es mit einem Proxy-Image funktioniert, aber es funktioniert. Getestet auf Firefox Dev 37 und Chrome 40.

Hoffe es hilft jemandem.

BEARBEITEN

Ein bisschen weiter untersucht. Es scheint, dass manchmal die Base64-Codierung (zumindest in meinem Fall) aufgrund von Zeilenumbrüchen im codierten Wert mit CSS unterbrochen wird (in meinem Fall wurde der Wert dynamisch von ActionScript generiert).

Einfach mit zB:

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

funktioniert auch und scheint sogar einige ms schneller zu sein als die Verwendung eines Proxy-Images.

lutogniew
quelle
2
Das Entfernen der Zeilenumbrüche hat es für mich behoben.
Evan
Gute Untersuchung.
Sølve Tornøe
31

Versuchen Sie dies, ich habe Erfolgsreaktion .. es funktioniert

$("#divId").css("background-image", "url('data:image/png;base64," + base64String + "')");
Gihansalith
quelle
Scheint, wenn data:image/png;base64es lang ist und die Zeichenfolge als jquery-Variable definiert ist, dann funktioniert es nicht. Funktioniert aber, wenn der String als PHP-Variable definiert ist, wie das PHClaus-Beispiel .... Nur Infos zu dem, was ich getestet habe
Andris
12

Hinzufügen dieses Tricks zu Gabriel Garcias folgender Lösung: 

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

In meinem Fall funktionierte dies jedoch nicht. Das Verschieben der URL in die Variable img hat den Trick getan. SO sah der endgültige Code so aus

var img = "url('data:image/png;base64, "+base64Data + "')";
document.body.style.backgroundImage = img;
Amit Kumar Rai
quelle
1
@Amit Kumar Rai du hast recht. Mir fehlten die einfachen Anführungszeichen in meinem Code, die Sie tatsächlich geschrieben haben, damit Ihr Code funktioniert.
Gabriel Garcia
7

Ich habe es versucht (und für mich gearbeitet):

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

ES6-Syntax:

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

Ein bisschen besser:

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

let node = nodeIGotFromDOM, img = imageBase64EncodedFromMyGF
setBackground.call(node, img)
Gabriel Garcia
quelle
1
Witzig, weil dies genau der Code ist, von dem die Leute sagen, dass er nicht funktioniert.
Pimp Trizkit
Das funktioniert auch bei mir. Getestet auf Microsoft Edge und IE 11
Ryan.C
2

Was ich normalerweise mache, ist, zuerst die vollständige Zeichenfolge in einer Variablen zu speichern, wie folgt:

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

Dann, wo ich möchte, dass entweder JS etwas mit dieser Variablen macht:

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

Sie können dieselbe Variable über PHP direkt referenzieren, indem Sie Folgendes verwenden:

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

Funktioniert bei mir ;)


quelle
2

Dies ist der richtige Weg, um einen reinen Anruf zu tätigen. Kein CSS.

<div style='background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAFCAYAAABW1IzHAAAAHklEQVQokWNgGPaAkZHxPyMj439sYrSQo51PBgsAALa0ECF30JSdAAAAAElFTkSuQmCC)repeat-x center;'></div>
user5641497
quelle
<div style = 'background: url (Daten: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAABwAAAAFCAYAAABW1IzHAAAAHklEQVQokWNgGPaAkZHxPyMj439sYrSQo51PBgsAALa0ECF30JSdAAAAAElFTkSuQmCC) repeat-x center;'> </ div>
user5641497
Um einen Code einzugeben, rücken Sie ihn um vier Leerzeichen ein oder wählen Sie ihn aus und drücken Sie Strg-K.
2

Ich denke, dies wird helfen, Base64 wird von CSS auf eine andere Weise angesprochen. Sie sollten den Datentyp des Bildes auf base64 setzen. Dies wird dem CSS helfen, das base64 in image zu ändern und es dem Benutzer anzuzeigen. und Sie können dies aus Javascript heraus verwenden, indem Sie das Hintergrundbild mithilfe des JQuery-Skripts zuweisen. Dadurch wird die Base64 automatisch in Magier geändert und angezeigt

url = "data:image;base64,"+data.replace(/(\r\n|\n|\r)/gm, "");
$("body").css("background-image", "url('" + url.replace(/(\r\n|\n|\r)/gm, "") + "')");
Erweitern Sie das Snippet

Rami Mohammed
quelle
Von Nur-Code-Antworten wird abgeraten. Klicken Sie auf Bearbeiten und fügen Sie einige Wörter hinzu, die zusammenfassen, wie Ihr Code die Frage beantwortet, oder erklären Sie möglicherweise, wie sich Ihre Antwort von der vorherigen Antwort / den vorherigen Antworten unterscheidet. Ich kann keinen wirklichen Unterschied zwischen dieser und einer der zuvor veröffentlichten Antworten feststellen.
Nick
0

In meinem Fall war es nur, weil ich das heightund nicht eingestellt habe width.

Aber es gibt noch ein anderes Problem.

Das Hintergrundbild kann mit entfernt werden

element.style.backgroundImage=""

konnte aber nicht mit eingestellt werden

element.style.backgroundImage="some base64 data"

Jquery funktioniert gut.

stlebeax
quelle