Пару лет назад я занимался проблемой data URL в Internet Explorer, добился определённых результатов, но то, что получилось, использовать было невозможно. Data URL (иногда его ещё называют «протокол data:») — возможность вставлять ресурсы (графику, CSS, JavaScript и так далее) в HTML код.
Выглядит это примерно так:
<img src="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAw AAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFz ByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSp a/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJl ZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uis F81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PH hhx4dbgYKAAA7" />
В Data URL указывает тип содержимого и способ его кодирования. Способа кодирования два — base64 (именно он и указан в примере), увеличивающий содержимое на треть и URL encoding (в этом случае способ кодирования не указывается) — привычный многим способ кодирования при помощи %xx, в лучшем случае вообще не увеличивает размер содержимого, в худшем — увеличивает в три раза.
Кстати, в настоящее время IE8b1 поддерживает data URL, но, увы, длиной не более 32Кб.
Теперь амбула.
Вчера ночью мне пришла в голову идея как можно попытаться корректно совместить data URL и включение картинок через протокол mhtml. То, что у меня не получилось два года назад, получилось сейчас.
Результат — готовый код на PHP из двух функций. Первую функцию («bolk_data_uri_header») нужно вызвать в самом начале перед выводом любого вашего кода, вторую («bolk_data_uri») собственно для включения картинки в код. Надеюсь, на примерах всё понятно:
bolk_data_uri_header();
bolk_data_uri('myjpeg.jpg');
bolk_data_uri('ourpng.png', 'border: 2px dotted red');Код самой библиотеки:
function bolk_data_uri_header()
{
echo "<!--\n"
."Content-Type: multipart/related; boundary=\"="
."_NextPart_01C6A9B1.539AB070\"\n\n"
."--=_NextPart_01C6A9B1.539AB070\n"
."Content-Transfer-Encoding: base64\n"
."Content-Type: text/html\n"
."-->\n\n";
}
function bolk_data_uri($file, $style = '')
{
if (!( file_exists($file) && ($data = @getimagesize($file)) ))
return false;
$name = uniqid('', true);
if ($style <> '') $style = '';
echo "<!--\n"
."--=_NextPart_01C6A9B1.539AB070\n"
."Content-Location: {$name}\n"
."Content-Transfer-Encoding: base64\n"
."Content-Type: {$data['mime']}; -->\n"
."<object data='data:{$data['mime']};base64,\n\n";
echo base64_encode(file_get_contents($file));
echo "' {$data[3]}{$style} type='\n{$data['mime']}'><img "
."src='mhtml:http://{$_SERVER['HTTP_HOST']}{$_SERVER['REQUEST_URI']}!{$name}' {$data[3]}{$style} /></object>\n\n"
."<!--\n"
."--=_NextPart_01C6A9B1.539AB070-->";
return true;
}У данного метода, по сравнению с обычными data URL есть масса ограничений: необходим специальный заголовок в начале файла, т.е. этот метод невозможно использовать на чужих сайтах, этим методом нельзя воспользоваться (по крайней мере не в таком виде) для включения ресурсов внутрь CSS или JavaScript. В принципе, тут есть достаточно большое поле для экспериментов, возможно, все или некоторые из проблем можно решить.
В разделе «храню» есть пример, который можно потестировать на имеющихся у вас браузерах. Уже протестировано на Opera 9.25 и 9.50b, FF 2.0.0.13 и 4 (Minefield), Safari 3.1 (Safari под iPhone — тоже), Internet Explorer 6.0SP2 и 7.0, Sony PSP browser, Opera mini, Netscape Navigator 9.0.0.5.