Многим известен данный способ отображения картинок, но особой популярностью он не пользуется, т.к. имеет проблемы с отображением в Internet Explorer (IE 6,7 — вообще не понимают, что им дают. А IE8 — принимает только картинки меньше 32кб).
Как же решить эту проблему?
Согласно RFC 2397, картинка (как и любые другие данные) должна быть представлена в следующем формате:
Что же здесь такого интересного? Дело в том, что mediatype может содержать в себе дополнительные параметры (например, charset).
Соответственно, никто не запрещает нам хранить в нем свои данные.
Internet Explorer не может прочитать закодированные в base64 изображения, но спокойно может загрузить их, если мы укажем их url.
Так что, если указать url прямо в mediatype?
Сделать это можно примерно следующим образом:
Это все, конечно, очень хорошо и интересно, но как же IE поймет, что дополнительный параметр и есть наша картинка?
Я предлагаю использовать behavior.
Это css-атрибут, поддерживаемый только в Internet Explorer и многим известный по такому проекту как PNGFix (одной из его реализаций).
Выглядеть это будет примерно так (код CSS):
А это код ieb64.htc:
Посмотреть демонстрацию можно здесь.
А тут можно скачать htc-файл.
Спасибо за чтение!
Как же решить эту проблему?
Согласно RFC 2397, картинка (как и любые другие данные) должна быть представлена в следующем формате:
data:[<mediatype>][;base64],<data>
Изучим синтаксис более подробно:
dataurl := "data:" [ mediatype ] [ ";base64" ] "," data
mediatype := [ type "/" subtype ] *( ";" parameter )
data := *urlchar
parameter := attribute "=" value
Что же здесь такого интересного? Дело в том, что mediatype может содержать в себе дополнительные параметры (например, charset).
Соответственно, никто не запрещает нам хранить в нем свои данные.
К чему я все это?
Internet Explorer не может прочитать закодированные в base64 изображения, но спокойно может загрузить их, если мы укажем их url.
Так что, если указать url прямо в mediatype?
Сделать это можно примерно следующим образом:
data:image/png;src=habr.png;далее_base64_кодировка...
Это все, конечно, очень хорошо и интересно, но как же IE поймет, что дополнительный параметр и есть наша картинка?
Я предлагаю использовать behavior.
Это css-атрибут, поддерживаемый только в Internet Explorer и многим известный по такому проекту как PNGFix (одной из его реализаций).
Выглядеть это будет примерно так (код CSS):
#A {
background-image: url(data:image/png;src=habr.png;далее_base64_кодировка...);
behavior: url(ieb64.htc);
}
А это код ieb64.htc:
<public:attach event="ondocumentready" onevent="ondocumentready()" />
<script type="text/javascript">
function ondocumentready() {
this.style.backgroundImage =
this.currentStyle
.backgroundImage
.replace(
/^url\s*\(\s*\"?\s*data:[^;]+;src=([^;]+);.*$/,
function(all, url) {
return "url(\"" + url + "\")";
}
);
}
</script>
Посмотреть демонстрацию можно здесь.
А тут можно скачать htc-файл.
Спасибо за чтение!