Пару лет назад я
занимался проблемой data URL в Internet Explorer, добился определённых результатов, но то, что получилось, использовать было невозможно. Data URL (иногда его ещё называют «протокол data:») — возможность вставлять ресурсы (графику, CSS, JavaScript и так далее) в HTML код.
Подробнее о data URL можно узнать из свежей статьи на «Хабре» «
Картинки в теле страницы с помощью data:URL». Хотелось только её дополнить двумя замечаниями: IE8b1 поддерживает data URL длиной
не более 32Кб, в современных версиях других браузеров ограничений увидеть не удалось, Safari/Opera/FF показали изображения размером около 700Кб.
Теперь амбула.
Вчера ночью мне пришла в голову идея как можно попытаться корректно совместить 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 = ' style="'.htmlspecialchars($style).'"';
$mime = strpos($_SERVER['HTTP_USER_AGENT'], 'Gecko') ? " type='{$data['mime']}" : '';
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}{$mime}'><img "
."src='mhtml:http://{$_SERVER['HTTP_HOST']}"
."{$_SERVER['REQUEST_URI']}!{$name}' {$data[3]}{$style} /></object>\n\n"
."<!--\n"
."--=_NextPart_01C6A9B1.539AB070-->";
return true;
}
Секрет в совмещении данных, чтобы IE, обратившись к странице по протоколу mhtml нашёл нужный кусор, «спрятанный» внутри тега, а остальные браузеры увидели бы картинку через data URL.
Код тестировался под Opera 9.50b, FF 2.0.0.13, Safari 3.1 и IE6. Предложения и результаты испытаний — прошу в комментарии.
Оригинал записи опубликован в моём блоге.
