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?

javascriptbase64background-image
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
Ezequiel Gorbatik

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