Привет, разработчики или просто тем, кто зашел на мой блог. Сегодня не напрягающая мозги заметка, которая создана лишь с целью позабавиться. Из картинки мы будем делать цветной ASCII ART. Пригодится для поздравлений или просто шутки ради.

Нам понадобится любая картинка в формате jpeg (кто хочет поддержку других форматов, может легко это доделать) и немного кода на php + расширение gd (хотя сейчас сложно найти хостинг без поддержки этой замечательной графической библиотеки).

Алгоритм до безумия прост: – Ресайзим картинку до размеров по максимальному измерению до 100 пикселей (падает точность, но скорость заметно возрастает).

• В цикле по всем пиксилям полученного изображения выводим любой символ (я предпочел звездочку “*”), закрашивая его соответствующим цветом исходного изображения.

Еще допишем стили, чтобы наш ASCII ART красиво отображался (проверял в FF и Chrome):

1
2
3
4
5
6

div#picture span {
  display: block;
  float: left;
  width: 5px;
  height: 5px;
}

И исходный код трансформатора на php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<?php
/**
 * @author vredniy.ru
 */
$file = "homer6.jpg";

// максимальное измерение (прибавляет скорости)
$mSize = 100;

$im = imagecreatefromjpeg($file);
list($x, $y) = getimagesize($file);
$ratio = $x/$y;
if ($x > $y) {
   $nx = $mSize;
   $ny = round($mSize / $ratio);
} else {
   $ratio = 1/$ratio;
   $ny = $mSize;
   $nx = round($mSize / $ratio);
}
$ni = imagecreatetruecolor($nx, $ny);
// создаем пропорционально уменьшенную копию
imagecopyresampled($ni, $im, 0, 0, 0, 0, $nx, $ny, $x, $y);

$message = '<div id="picture">';
for($h = 0; $h < $ny; $h++) {
   $message .= '<div style="clear:both"></div>';
   for($w = 0; $w < ceil($nx); $w++) {
      $rgb = imagecolorat($ni, $w, $h);
      $r = ($rgb >> 16) & 0xFF;
      $g = ($rgb >> 8) & 0xFF;
      $b = $rgb & 0xFF;
      $message .= sprintf('<span style="color: rgb(%d, %d, %d)">*</span>', $r, $g, $b);
   }
}
$message .= '</div>';
echo $message;
?>

Первое изображение в заметке – это результат трансформации изображения чуть ниже. Удачи вам и кода без ошибок :)