Je veux changer d'arrière-plan de manière dynamique dans JS et mon ensemble d'images est en base64 codé
document.getElementById("bg_image").style.backgroundImage =
"url('http://amigo.com/300107-2853.jpg')";
avec résultat parfait
mais je ne parviens pas à faire de même 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?
J'ai essayé de faire la même chose que vous. Apparemment, backgroundImage ne fonctionne pas avec les données encodé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.
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;
Je l'ai bidouillé ici, appuyez sur le bouton pour changer le fond des divs: http://jsfiddle.net/egorbatik/fFQC6/
Essayez ceci, J'ai la réponse du succès .. ça marche
$("#divId").css("background-image", "url('data:image/png;base64," + base64String + "')");
Avait le même problème avec base64. Pour tout le monde à l'avenir avec le même problème:
url = "data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAYAAAAUYybjAAAgAElE...";
Cela fonctionnerait depuis la console, mais pas depuis un script:
$img.css("background-image", "url('" + url + "')");
Mais après avoir joué un peu avec, je suis arrivé à ceci:
var img = new Image();
img.src = url;
$img.css("background-image", "url('" + img.src + "')");
Aucune idée pourquoi cela fonctionne avec une image proxy, mais ça marche. Testé sur Firefox Dev 37 et Chrome 40.
J'espère que ça aide quelqu'un.
MODIFIER
Enquêté un peu plus loin. Il semble que parfois l'encodage en base64 (du moins dans mon cas) rompt avec CSS à cause des sauts de ligne présents dans la valeur codée (dans mon cas, la valeur a été générée dynamiquement par ActionScript).
En utilisant simplement, par exemple:
$img.css("background-image", "url('" + url.replace(/(\r\n|\n|\r)/gm, "") + "')");
fonctionne aussi, et semble même être plus rapide de quelques ms que d’utiliser une image proxy.
Ajouter 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. Déplacer l'URL dans la variable img a fait l'affaire. SO le code final ressemblait à ceci
var img = "url('data:image/png;base64, "+base64Data + "')";
document.body.style.backgroundImage = img;
J'ai essayé ceci (et travaillé 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)
Ce que je fais habituellement, c'est de stocker d'abord la chaîne complète dans une variable, comme ceci:
<?php
$img_id = 'data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAY...';
?>
Ensuite, je veux que JS fasse quelque chose avec cette variable:
<script type="text/javascript">
document.getElementById("img_id").backgroundImage="url('<?php echo $img_id; ?>')";
</script>
Vous pouvez référencer la même variable via PHP directement en utilisant quelque chose comme:
<img src="<?php echo $img_id; ?>">
Travaille pour moi ;)
C'est la bonne façon de faire un appel pur. Pas de CSS.
<div style='background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAFCAYAAABW1IzHAAAAHklEQVQokWNgGPaAkZHxPyMj439sYrSQo51PBgsAALa0ECF30JSdAAAAAElFTkSuQmCC)repeat-x center;'></div>
Dans mon cas, c’est simplement parce que je n’ai pas défini height
et width
.
Mais il y a un autre problème.
L'image d'arrière-plan peut être supprimée à l'aide de
element.style.backgroundImage=""
mais ne peut pas être réglé en utilisant
element.style.backgroundImage="some base64 data"
Jquery fonctionne bien.
Je pense que ça aidera
url = "data:image;base64,"+data.replace(/(\r\n|\n|\r)/gm, "");
$("body").css("background-image", "url('" + url.replace(/(\r\n|\n|\r)/gm, "") + "')");