Многие, наверное, уже видели 5K Wolfstein, написанный на JavaScript. Явление, само по себе, весьма любопытное, но меня оно интересует с несколько иной точки зрения - в программе использована графика в формате XBM.
Формат, при всех своих недостатках (черно-белая графика, много весит) имеет одно неоспоримое достоинство - так как формат этот текстовый, генерировать картинку можно практически из любого языка, который умеет работать со строками. Причем, как оказалось, в некоторых браузерах генерацию можно поручить даже клиентским скриптовым языкам.
Формат XBM является частью X Window System, хорошо знакомой юниксоидам. Внешне внутренность такого файла выглядит, как программа на C и имеет вот такой вот формат:
#define имя_width количество пикселей по горизонтали
#define имя_height количество пикселей по вертикали
static unsigned char имя_bits[] = {
последовательность чисел
} |
 Какое значение имеет поле имя в браузере я не знаю, скорее всего никакого, думаю его можно оставить пустым - ничего от этого не меняется. Для того, чтобы лучше себе представить, как выглядят внутренности картинки в этом формате позволю себе небольшой пример. Если загрузить эту картинку в браузер вы увидите несколько черно-белых квадратов, заключенных один в другой:
#define _width 16
#define _height 16
static unsigned char _bits[] = {
0xff, 0xff, 0x01, 0x80, 0xfd, 0xbf, 0x05, 0xa0, 0xf5, 0xaf, 0x15, 0xa8,
0xd5, 0xab, 0x55, 0xaa, 0x55, 0xaa, 0xd5, 0xab, 0x15, 0xa8, 0xf5, 0xaf,
0x05, 0xa0, 0xfd, 0xbf, 0x01, 0x80, 0xff, 0xff} |
Значение выражения " последовательность чисел" я, думаю, понятно - это перечисленные через запятую байты матрицы, каждый бит которых определяет цвет соответствующей точки. Мои эксперименты показали, что графику этого типа понимает широкий набор браузеров. Я проводил тесты под Opera 6.04, Microsoft Internet Explorer 6.0, Mozilla 1.01b, Netscape Navigator 4.79 и Netscape Navigator 7.0 - все они без проблем показали эту картинку.
Как я уже упоминал, генерацию графики этого типа под некоторыми браузерами можно поручить клиентским скриптам. Под Windows c этой задачей справляются IE 5, 6 и Mozilla, под Mac - Netscape 4.77 и выше, под Unix - Mozilla. По поводу остальных браузеров и платформ мне ничего не известно.
Метод выглядит несколько странно и заключается в записи содержимого файла в переменную с последующим вызовом в теге <IMG> через метод "javascript":
<script>
image_var = '#define _width 16\n#define _height 16\nstatic unsigned char _bits[] = { 0xff, 0xff, 0x01, 0x80, 0xfd, 0xbf, 0x05, 0xa0, 0xf5, 0xaf, 0x15, 0xa8, 0xd5, 0xab, 0x55, 0xaa, 0x55, 0xaa, 0xd5, 0xab, 0x15, 0xa8, 0xf5, 0xaf, 0x05, 0xa0, 0xfd, 0xbf, 0x01, 0x80, 0xff, 0xff}'
</script>
<img src='javascript:image_var' width="32" height="32" /> |
С GIF, JPEG и BMP такой фокус, к сожалению, не проходит - думаю, во всем виноват символ с кодом 0, который в изобилии встречается в файлах этих форматов. |
|
В блуждании по страницам в Сети нашел прекрасный ресурс - 