Existe-t-il un moyen de définir l'image d'arrière-plan comme une image codée en base64 ?

Question

Je veux changer l'arrière-plan dynamiquement en JS et mon ensemble d'images est codé en base64. J'essaie :

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

avec un résultat parfait,

mais je n'arrive pas à faire la même chose avec :

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

ni

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

Y a-t-il un moyen de le faire ?

Answer 1

J'ai essayé de faire la même chose que vous, mais apparemment le backgroundImage ne fonctionne pas avec des données codées. Comme alternative, je suggère d'utiliser les classes CSS et le changement entre ces classes.

Si vous générez les données "à la volée", vous pouvez charger les fichiers CSS de manière dynamique.

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;

.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=");
}

<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" />

J'ai bricolé ici, appuyez sur le bouton et cela changera les fonds des divs : http://jsfiddle.net/egorbatik/fFQC6/

Answer 2

J'ai eu le même problème avec la base64. Pour toute personne ayant le même problème à l'avenir :

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

Cela fonctionnerait exécuté depuis la console, mais pas depuis un script :

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

Mais après avoir joué un peu avec, j'ai trouvé ça :

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

Je ne sais pas pourquoi cela fonctionne avec une image proxy, mais c'est le cas. Testé sur Firefox Dev 37 et Chrome 40.

J'espère que cela aidera quelqu'un.

EDITAR

J'ai enquêté un peu plus loin. Il semble que parfois, l'encodage base64 (du moins dans mon cas) s'interrompt avec CSS à cause des sauts de ligne présents dans la valeur encodée (dans mon cas, la valeur a été générée dynamiquement par ActionScript).

Il suffit d'utiliser par exemple :

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

fonctionne également, et semble même être plus rapide de quelques ms que l'utilisation d'une image proxy.

Answer 3

Essaie ça, J'ai obtenu une réponse positive cela fonctionne.

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

Answer 4

En ajoutant cette astuce à la solution suivante de gabriel garcia -

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

Cependant, dans mon cas, cela ne fonctionnait pas. Le déplacement de l'url dans la variable img a fait l'affaire. Donc le code final ressemblait à ceci

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

Answer 5

J'ai essayé ceci (et cela a fonctionné pour moi) :

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

Syntaxe ES6 :

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

Un peu mieux :

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

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