web-dev-qa-db-fra.com

Est-il possible de définir background-image comme une image codée en base64?

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?

javascriptbase64background-image
43
Igor Savinkin

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/

50
Ezequiel Gorbatik

Essayez ceci, J'ai la réponse du succès .. ça marche

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

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.

16
lutogniew

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;
4
Amit Kumar Rai

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

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 ;)

2
user1263254

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

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.

0
stlebeax

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, "") + "')");

0
Rami Mohammed