Base64 изображения в HTML

Категория: / DEV Блог / PHP (LAMP)
Используем IMG

<img
src="data:image/gif;base64,R0lGODlhUAAPAKIAAAsLav///88PD9WqsYmApmZmZtZfYmdakyH5BAQUAP8ALAAAAABQAA8AAAPb
WLrc/jDKSVe4OOvNu/9gqARDSRBHegyGMahqO4R0bQcjIQ8E4BMCQc930JluyGRmdAAcdiigMLVr
ApTYWy5FKM1IQe+Mp+L4rphz+qIOBAUYeCY4p2tGrJZeH9y79mZsawFoaIRxF3JyiYxuHiMGb5KT
kpFvZj4ZbYeCiXaOiKBwnxh4fnt9e3ktgZyHhrChinONs3cFAShFF2JhvCZlG5uchYNun5eedRxM
AF15XEFRXgZWWdciuM8GCmdSQ84lLQfY5R14wDB5Lyon4ubwS7jx9NcV9/j5+g4JADs=
"  />


Используем CSS

.copy {
  background: url(data:image/png;base64,
    iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAIp
    ...truncated again for readability...
    Vv7atFglaFIu5KLuPxeX/xsp7aR6AAAAAElFTkSuQmCC
  );
}


Internet explorer не поддерживает распаковку base64, у нас есть несколько вариантов решения проблемы.
Можно реализовать распаковку с помощью внешнего php скрипта который на входе имеет base64 последовательность,
на выходе - распакованные данные.

img{behavior:expression((this.runtimeStyle.behavior="none")
&&(/^data:.*;base64/i.test(this.src))&&(this.src="/my/base64.php?"+this.src.slice(5)))}


Либо воспользоваться js решением и распаковывать данные браузером (например http://www.webtoolkit.info/javascript-base64.html)

Создаем base64-кодированое изображение на PHP.

<?php
$file = "icon.gif";
if($fp = fopen($file,"rb", 0))
{
   $picture = fread($fp,filesize($file));
   fclose($fp);
   // base64 encode the binary data, then break it
   // into chunks according to RFC 2045 semantics
   $base64 = chunk_split(base64_encode($picture));
   $tag = '<img ' . "n" .
          'src="data:image/gif;base64,' . $base64 .
          '" />';
   echo $tag;
}


Источник 1: http://dean.edwards.name/weblog/2005/06/base64-sexy/
Источник 2: http://www.sweeting.org/mark/blog/2005/07/12/base64-encoded-images-embedded-in-html