webentwicklung-frage-antwort-db.com.de

Gibt es eine Möglichkeit, ein Hintergrundbild als Base64-kodiertes Bild festzulegen?

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

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

mit perfektem Ergebnis, 

aber ich schaffe es nicht 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?

43
Igor Savinkin

Ich habe versucht, dasselbe zu tun wie Sie, anscheinend funktioniert das backgroundImage nicht mit verschlüsselten Daten. Als Alternative empfehle ich die Verwendung von CSS-Klassen und die Änderung zwischen diesen Klassen.

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 es hier gefummelt, drück den Knopf und es wird die Hintergründe der Divs wechseln: http://jsfiddle.net/egorbatik/fFQC6/

50

Versuchen Sie dies. Ich habe eine Erfolgsmeldung

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

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 von der Konsole aus ausgeführt werden, jedoch nicht innerhalb eines Skripts:

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

Aber nachdem ich ein bisschen damit gespielt hatte, kam ich dazu:

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 mit Firefox Dev 37 und Chrome 40.

Hoffe es hilft jemandem.

EDIT

Etwas weiter untersucht. Es scheint, dass die base64-Codierung (zumindest in meinem Fall) manchmal mit CSS bricht, weil im codierten Wert Zeilenumbrüche vorhanden sind (in meinem Fall wurde der Wert dynamisch von ActionScript generiert). 

Einfach mit z.

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

funktioniert auch und scheint sogar einige ms schneller zu sein als ein Proxy-Image.

16
lutogniew

Hinzufügen dieses Tricks zu Gabriel Garcia folgende Lösung - 

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

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

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

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

Was ich normalerweise mache, ist, zuerst die vollständige Zeichenfolge in einer Variablen zu speichern, wie dies z.

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

Dann, wo ich möchte, dass 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 direkt über PHP referenzieren, indem Sie Folgendes verwenden:

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

Funktioniert bei mir ;)

2
user1263254

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>
1
user5641497

In meinem Fall war es nur, weil ich nicht height und width eingestellt habe.

Es gibt aber noch ein anderes Problem.

Das Hintergrundbild kann mit entfernt werden

element.style.backgroundImage=""

aber konnte nicht eingestellt werden

element.style.backgroundImage="some base64 data"

Jquery funktioniert gut.

0
stlebeax

Ich denke das wird helfen

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