1

Тема: JavaScript: работа с рисунками в формате XPM

Пример HTML-страницы с рисунком, который хранится в виде текста:

<html>
<body>
    <!--Координаты левого верхнего угла изображения задаются тут-->
    <div id="Picture" style="position:absolute; left:50px; top:50px;"></div>
</body>

<script type="text/javascript">
// Рисунок в формате XPM 
var Colors={
"." : "#CE9A31",
"+" : "#FFFFFF",
"@" : "#FFEFC6",
"#" : "#AD7531",
"$" : "#FFEFAD",
"%" : "#FFE394",
"&" : "#F7D773",
"*" : "#FFF7C6",
"=" : "#EFC34A",
"-" : "#E74131",
";" : "#EF3839",
">" : "#E76D29",
"," : "#C66129",
"'" : "#DE2021",
")" : "#DE3039",
"!" : "#BD8631",
"~" : "#EFAE21",
"{" : "#FF867B",
"]" : "#FF8E84",
"^" : "#F7615A",
"/" : "#DE5121",
"(" : "#DE5929",
"_" : "#EF4942",
":" : "#EF4939",
"<" : "#EF3431",
"[" : "#D63439",
"}" : "#F7D373",
"|" : "#E74142",
"1" : "#FF9284",
"2" : "#FFA69C",
"3" : "#FF968C",
"4" : "#F76963",
"5" : "#F75952",
"6" : "#EF514A",
"7" : "#EF4539",
"8" : "#EF4131",
"9" : "#CE1010",
"0" : "#E74542",
"a" : "#FF8A84",
"b" : "#FF9A94",
"c" : "#EF5952",
"d" : "#EF3C31",
"e" : "#EFB229",
"f" : "#DE3829",
"g" : "#F7756B",
"h" : "#F76D6B",
"i" : "#F75D5A",
"j" : "#EF554A",
"k" : "#EF4D42",
"l" : "#EF3831",
"m" : "#CE2029",
"n" : "#DE6118",
"o" : "#F75D52",
"p" : "#E72429",
"q" : "#DE8A8C",
"r" : "#9C6531",
"s" : "#BD3408",
"t" : "#DE2029",
"u" : "#D6696B",
"v" : "#E7717B",
"w" : "#EF4542",
"x" : "#EF4139",
"y" : "#D6616B",
"z" : "#DE616B",
"A" : "#E72C31",
"B" : "#CE555A",
"C" : "#DE5552",
"D" : "#CE494A"
}

var Bitmap = [
"  ....          ",
" .++++.         ",
".@@@@@@.....#   ",
".$$$$$$$$$$$#   ",
".%%.............",
".&&.***********.",
".=.$$$$-;>$$,')!",
".~.%%%-{]^/(_:<[",
"..&&&}|123456789",
"..====0ab]4c67d9",
"..~~eefgghijk7lm",
" .~~~~n6^oj6_dpq",
"  rrrrrs_j6_7tu ",
"        vw:xpy  ",
"         zxAB   ",
"          CD    "
]

// Рисование одной точки (фактически - добавление одного раскрашенного div)
function MakePoint(x, y, color) {
    var point = document.createElement('div');
    point.innerHTML = '<div style="position:absolute;' +
        'width:0px; height:1px; clip:rect(0,1px,1px,0);'+
        'border-left:1px solid ' + color + ';'+
        'background-color:' + color + ';'+
        'left:' + x + 'px;'+
        'top:' + y + 'px;'+
        '"><\/div>';
    document.getElementById("Picture").appendChild(point);
}

// Перебираем Bitmap и рисуем точки
for (var y=0; y<Bitmap.length; y++) {
    var line = Bitmap[y];
    for (var x=0; x<line.length; x++) {
        var color = Colors[line.charAt(x)]
        if (color) {
            MakePoint(x, y, color);
        }
    }
}

</script>
</html>

Автор решения — mozers.
Мощный JS скрипт, работающий по этому же принципу, но с множеством дополнительных возможностей.
Преобразовать различные картинки в формат XPM можно с помощью популярного графического редактора GIMP.

Предложения в русском языке начинаются с большой буквы и заканчиваются точкой.
В названии ветки всегда должен быть указан язык программирования или среда исполнения скрипта, если это возможно.