Czy istnieje sposób ustawienia obrazu tła jako obrazu kodowanego base64?

Question

Chcę zmienić tło dynamicznie w JS, a mój zestaw obrazów jest zakodowany w base64. Staram:

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

z doskonałego wyniku

jeszcze nie udało mi się zrobić to samo z:

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

ani

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

Czy istnieje jakiś sposób, aby to zrobić ?

Answer 1

Próbowałem zrobić to samo co ty, najwyraźniej jest to backgroundImage nie działa z encondowanymi danymi. Jako alternatywę proponuję użyć klas css i zmiany między tymi klasami.

Jeśli generujesz dane "w locie", możesz dynamicznie załadować pliki 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; 

I bawił go tutaj, naciśnij przycisk i będzie przełączać DIV teł: http://jsfiddle.net/egorbatik/fFQC6/

Answer 2

Co zwykle zrobić, jest przechowywanie pełny ciąg do zmiennej najpierw tak:

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

Następnie, gdzie chcę albo JS zrobić coś z tej zmiennej:

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

Mogłabyś odwoływać się do tej samej zmiennej poprzez PHP bezpośrednio za coś takiego:

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

pracuje dla mnie;)

Answer 3

Spróbuj tego, mam powodzenie odpowiedź ..To działa

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

Answer 4

miał ten sam problem z base64. Dla każdego, kto w przyszłości z tego samego problemu:

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

to będzie działać wykonanego z konsoli, ale nie z poziomu skryptu:

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

Ale po grać z nim trochę, wymyśliłem to:

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

Nie wiem, dlaczego działa z obrazem proxy, ale to robi. Testowany na Firefox Dev 37 i Chrome 40.

Mam nadzieję, że komuś pomaga.

EDIT

Badane nieco dalej. Wydaje się, że czasami kodowanie base64 (przynajmniej w moim przypadku) zrywa z CSS z powodu podziałów linii obecnych w zakodowanej wartości (w moim przypadku wartość została wygenerowana dynamicznie przez ActionScript).

prostu za pomocą np .:

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

działa zbyt, a nawet wydaje się być szybszy o kilka ms niż przy użyciu obrazu proxy.

Answer 5

To jest poprawny sposób wykonywania czystych połączeń. Bez CSS.

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

Answer 6

Próbowałem to (i pracował dla mnie):

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

ES6 składnia:

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

Nieco lepiej:

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

let node = nodeIGotFromDOM, img = imageBase64EncodedFromMyGF 
setBackground.call(img, node) 

Answer 7

Dodanie tej sztuczki Gabriel Garcia's following solution -

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

Jednak w moim przypadku to nie działało. Przeniesienie adresu URL do zmiennej img spowodowało powstanie problemu. SO ostateczny kod wyglądało to

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