<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.