Discussion :

[yvancoyaud]

Bonjour à tous
J'ai un script javascript dans lequel j'affiche une petite image.
Je suis donc obligé de me 'traîner' un fichier png en plus de mon fichier js et je trouve que c’est un peu pénible.
Il me semble que j'ai vu qu'i est possible d'embarquer une image dans une constante (une petite image bien sûr, genre 20x20) dans le script javascript et de pouvoir l'afficher sans avoir de fichier image externe. Impossible de trouver une piste sur le web !

Quelqu'un a-t-il une idée sur cette faisabilité
Merci
YC

[SpaceFrog]

encodées en base64 c'est possible pour ensuite le mettre en src d'une balise image ou en faire un draw dans un canvas

[jzyra]

Bonjour,

Tu peux la mettre dans le src d'une image de la façon suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="data:image/png;base64,<Ton image en base 64>" />

Par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAAK/INwWK6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAASAAAAEgARslrPgAAAAl2cEFnAAAAIAAAACAAh/qcnQAABEVJREFUWMPtlv1Pk1cUx++cb/ALcxFNzMKjC8LmNhZ0iyCKA6lQkC5jYCkW+vK0lFLEshJRKq8VKDArFJGX8SYgq0SROReZbsmSmSEDX6bZfnTxIfHX/QObZ/f7DAdmZqHdiL9wk+89zznne+7npk2elrHltbxe9NqQxoK3G0IN+4rfqEk6sq0q6cibS6xtVWCBCTYLTmRhYkPqw9pBK1X0iVQJ9Zv+Up9Jrj0V8vnewrp/M2CBCTYLSmBCcUuW5OjIJItHQebmJNLXJpCOy1ifKNcKuBCRo44+fAVzPX9mUAMLTLBZ0Ae4wEGprFtNNm8KaUqSKM+YQzpRS2qjisyNCjrcppQjctTRh6+I1yF/ZsAAC0yw2Vq+2b1qydmbQ3VDFjp8zEgm0Ux6nZ70xjyq+8xOzh6NHJGjjj588AcyAxaYa+UL7GVCSVu2VDWQS6dHHVR6wkYZGRmkVCop51A2eYer+XdmkCNy1NGHD/5AZsACE2y2hm+OMxrp5DAfuHSUHM5CUigUFBsTSx9nfUTtI7VUf94sR+Soow8f/IHMgAUm2Gw130rbD0mNn5upY7ycm2y0c2cMRUZGUroqjTp9ddTss8oROerowwd/IDNggblavkA8E452aCXPxUJqHs0nc2kmxe/ZSzu2v0dpqmRy9ZrI7TPKETnq6MMHfyAzYIEJNlvFt2OdudKZ8WJqumCg8jYNiQ4VGezpZKvMoPphPTWNGuWIHHX04UMd8muGM8ACc5V8gT1MON6lk7quOqhlzEKtl63kHZ9X61jB33qmfnm+jufFzVhlBlhggs1W8s3ZrZf6JsroeGcmWd0KsjXtp8L/WTgTZ4MBFphgs5d3M6GixygN3XBSAX9riTXRZHK9syTC2WCABSbY8gUqe0XJ9101OVrSyVAVQ/kndy+JcDYYYIEpX2BFHBOq+83SxZsu6v+6lLqv2pdUYIAFJtiM7WKCa8AiTcy00heTbroy2cjlb+S6NZffcs8/P+0tEBhguc5ZpJdwgU0J7PW8yjjJPWSmT0fyyT1o8is2DIrUcE4kV5/4e02/+XFNr/hb/YCJmvibsGn4+WoesRBnPlwfz3+Oo3exiIr6uNnhS/vpxvdZdH5s36LjNzezaOBCPPX7EqmsNvZxUBSLTs7edKKtJ+XJlevpND5x4DlKo6++zaRyV+yj8Cj+CUS9zyLau1Jnb9/T0f2fRZq+o/ErTs2oafpuLnnPpsyGbGQbc8XwomvXdU/uPdDR3ft5/9Cdn/LowS/8fXM2RRIi+QXe3sG2trYfeDQ1Y6Mffsyfk8WvOHW7iE55lVJwCAvPzBFKvryW/8fktGXBec8Kfk9b6q9hEfwCm7eydcoPN9jVWsFzUCucCkRq7WZPcnroJ0HBbMtb766Jy8gOq1X/q1/wpKhC7a9tYa/gf+lKrhCudf9Rr3KFcq1fpD9kji2vFS9Iy2t5sT8BSc3ECPy9NcgAAAAldEVYdGRhdGU6Y3JlYXRlADIwMDktMDktMTVUMTA6MzE6NTArMDI6MDBlG1b1AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDA5LTA5LTE1VDEwOjMxOjUwKzAyOjAwFEbuSQAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAASUVORK5CYII="/>

[yvancoyaud]

Merci pour ta réponse.

Existe-t-il un outil qui pourrait me permettre d'obtenir cette liste de caractères représentant l'image png.
J'ai cherché sur le web mais ce que j'ai trouvé me donne la valeur hexa de chaque octet.
Je ne me vois pas convertir tout ça à la main !!!

Le web n'est pas très prolixe sur le sujet ....

[jzyra]

Je n'ai pas testé, mais en PHP tu devrais pouvoir utiliser :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

print base64_encode(file_get_contents("/path/de/ton/image"));

Après une recherche rapide sur google : http://www.motobit.com/util/base64-decoder-encoder.asp

[yvancoyaud]

Merci, je vais regarder ça de plus près.
Je dirais ici le résultat

[SpaceFrog]

Il y a plein de freewaree ou des sites qui font ça online ...

[yvancoyaud]

Merci à tous, ça marche nickel .....

Ce petit utilitaire inline est très pratique http://www.motobit.com/util/base64-decoder-encoder.asp (merci jzyra)
Ça marche même avec des gifs animés

Merci
YC