samedi 10 janvier 2009

data URI scheme: copier coller des images en HTML

Je viens de tenter de copier une image (à partir d'une extension firefox de capture d'écran), puis de la coller dans un champ texte dans Blogger. Voici ce que j'obtiens:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE4AAABTCAYAAAAx4jFYAAAKJUlEQVR4nO2b2W8b1xWHA+
guM0MKXMRVu0QtJJWuBuzIbusUKCLbMuomQBPJjosaKFDLS5IG6IO2xAnQ1rbkFGhaFIhlIwHSNXK
QIH3Igyk0juM3KS7qvtKu/W5Kf8GvD+RQs9yrmaGokCpmgAND9PAu3z3n3HPOvXxipFWDL97liUYP
(...)
/ZWJze2WoursCJvlzLZzJwbtrxMh7RxGUL4TQ+2WeewW0H5k6Ac/OZE1wncNvWONEKOplLrVoqM2GR
Nm01Hq/AZa5k2xpXi6Zsx7y38nO1apNXjWsYuO0McLs+rqHgrCpbb3Bu2nYzHmtbbsHJviNyFfpnfh
xXo/jgfHA+uF0hPjgfnA9uV4gPzgfng9sV4oPzwfngdoX44HxwPrhdIf8DEvP8jbAbbQAAAAAASUVO
RK5CYII=


Et dans un tag HTML img ça donne ça:

dingue non ? et ça fonctionne même en CSS !:
ul.checklist > li.complete { margin-left: 20px; background:
url('data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAA
ABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/5
8ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/A
FGGFyjOXZtQAAAAAElFTkSuQmCC'
) top left no-repeat; }

Mais bien sûr, cela ne marche que sous les navigateurs suivants:
  • Mozilla Firefox
  • Opera
  • Safari
  • Chrome
  • Internet Explorer 8
Source: Wikipedia

Aucun commentaire:

Enregistrer un commentaire