Все графические файлы делятся на два глобальных типа — растровые и векторные. Иногда нужно сделать конвертацию из растра в черно-белый вектор. Например, для трассировки черно-белых иконок, QR-кодов, штрих-кодов, картинок с растровыми надписями, чеков или картинок в блоге.

image


Чем отличается растровый файл от векторного


Растровая графика

Растровый файл представляет последовательность цветных квадратов (пикселей). Количество точек в файле определяется его размерами по горизонтали и вертикали. Например, файл размером 640х480 содержит 307 200 точек. Растровый файл можно представить в виде мозаики. Нельзя растянуть растровую картинку, не потеряв в качестве.

Популярные растровые форматы: JPEG, GIF, PNG, TIFF, WEBP, BPG.

Векторная графика

Векторная графика представляет множество различных геометрических фигур, описанных математическими формулами. Наложение этих фигур друг на друга формирует изображение. Например, обычный квадрат описывается четырьмя равными отрезками, каждый из которых соединяется своими концами с концами двух других под углом 90 градусов.

Популярные векторные форматы: SVG, EPS, WMF, PDF.

Из растра в вектор


Алгоритм векторизации

Трассировка происходит в несколько этапов:

  • Векторизатор сканирует картинку и находит все области с пикселями, окрашенными в одинаковый цвет.
  • Границы апроксимируются отрезками толщиной в 1 px.
  • Строится триангуляция с ограничением по линиям.


image

Конвертер на основе Potrace

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

Есть очень простой и бесплатный способ внедрить такую конвертацию с применением векторного редактора Inkscape. Inkscape использует Potrace для векторизации картинок.

После трейсинга картинка может быть только черно-белой. На официальном сайте potrace написано, что возможно в будущем поддержка цветности будет реализована.

Пример конвертации из PNG в SVG. На входе функция potrace принимает только файлы с расширением PNM, поэтому перед трейсингом PNG нужно конвертировать:

 exec('convert image.png image.pnm');
 exec('potrace image.pnm -s -o image.svg');

Вот здесь реализован этот способ и можно посмотреть на качество трассировки любого изображения. Пример векторизации размытого штрих-кода. А это пример трассированного логотипа. Вот так конвертер справляется с фотографиями.

Как сделать выходную картинку цветной

Кроме ручного редактирования есть еще один вариант покраски черно-белой картинки на выходе. Но картинка должна быть малоцветной. Решение подойдёт для трассировки цветных иконок, логотипов и кнопок в вектор.

Можно выделить отдельные цвета с помощью маски ppmcolormask (входит в состав пакета Netpbm):

cat img.gif | giftopnm | ppmcolormask #641b1b | potrace

Затем трассировать каждую часть отдельно и на выходе наложить их друг на друга.

Из вектора в растр


Растеризовать векторный рисунок гораздо проще. На векторную картинку накладывается сетка с ячейками определенного размера и картинка дискретизируется, после чего кодируется согласно выходному формату.

image

Один из примеров конвертации SVG в PNG с использованием Imagick.

С помощью этого кода можно конвертировать файлы SVG в PNG24:

$svg = file_get_contents('image.svg');

$image = new Imagick();
$image->setBackgroundColor(new ImagickPixel('transparent'));  
$image->readImageBlob($svg);
$image->setImageFormat('png24');
$image->writeImage('image.png');
$image->clear();
$image->destroy();

Вот здесь можно посмотреть результаты конвертации своих картинок из SVG в PNG.

Конспект


  1. Конвертировать из растра в вектор на своем сайте можно с помощью potrace.
  2. Potrace поддерживает только черно-белую векторизацию.
  3. Конвертировать из вектора в растр можно с помощью Imagick.

Комментарии (5)


  1. nooze
    03.07.2015 16:03
    +1

    Еще Adobe Flash с давних времен умеет «векторизовать» растровые картинки (с некоторыми настройками детальности и принудительного приведения границ к более простым кривым) — выходит неплохо, если материал годный. При этом работает в цвете. Единственно — он часто разбивает границы на закрашенные области, а не кривые


    1. moccachin Автор
      03.07.2015 17:18

      Спасибо!


    1. VaKonS
      11.07.2015 01:38

      Кстати, если о платных говорить, посмотрите ещё Vector Magic (http://vectormagic.com/online/how_it_works) – очень хорошо трассирует, и не пробовал, но написано, что десктопная версия поддерживает пакетную обработку.


  1. ohm
    03.07.2015 22:24
    +1

    Для SVG -> PNG есть Inkscape:

    $ inkscape -z -e png target.png -w 800 -h 600 source.svg
    


    1. Imposeren
      06.07.2015 14:04
      -2

      а он разве под капотом не cairo использует? Если использует, тогда для серверов лучше брать cairosvg например, или вообще пользоваться обертками над cairo для нужных вам ЯП