SVGcode: PWA для преобразования растровых изображений в векторную графику SVG

SVGcode-это прогрессивное веб-приложение, которое позволяет конвертировать растровые изображения, такие как JPG, PNG, GIF, WebP, AVIF и т.д. к векторной графике в формате SVG.

1. SVGcode: PWA для преобразования растровых изображений в векторную графику SVG.

2. От растра к вектору

Вы когда-нибудь масштабировали изображение, а результат был пикселизированным и неудовлетворительным? Если это так, вы, вероятно, имели дело с растровым форматом изображения, таким как WebP, PNG или JPG.

Масштабирование растрового изображения делает его неровным.

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

Масштабирование векторного изображения без потери качества.

6. Представляем SVGcode

Я создал PWA под названием SVGcode, который может помочь вам конвертировать растровые изображения в векторы. Кредит там, где должен быть кредит: это не я придумал. С помощью SVGcode я просто стою на плечах инструмента командной строки под названием Potrace от Питера Селингера, который я преобразовал в веб-сборку, чтобы его можно было использовать в веб-приложении.

Скриншот приложения SVGcode.
Приложение SVGcode.

8. Использование SVGcode

Во-первых, я хочу показать вам, как пользоваться приложением. Я начинаю с тизерного изображения для Chrome Dev Summit, которое я скачал с твиттер-канала ChromiumDev. Это растровое изображение PNG, которое я затем перетаскиваю в приложение SVGcode. Когда я удаляю файл, приложение отслеживает цвет изображения по цвету, пока не появится векторизованная версия входных данных. Теперь я могу увеличить изображение, и, как вы можете видеть, края остаются четкими. Но, увеличив изображение логотипа Chrome, вы можете увидеть, что трассировка была не идеальной, и особенно контуры логотипа выглядят немного пятнистыми. Я могу улучшить результат, удалив крапинку трассировки, подавив крапинки размером, скажем, до пяти пикселей.

Преобразование удаленного изображения в SVG.

10. Постеризация в SVGcode

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

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

12. API, используемые в SVGcode

Теперь, когда вы увидели, на что способно приложение, позвольте мне показать вам некоторые API, которые помогают сотворить волшебство.

13. Прогрессивное Веб-Приложение

SVGcode - это устанавливаемое прогрессивное веб-приложение, поэтому оно полностью включено в автономном режиме. Приложение основано на шаблоне Vanilla JS для Vite.js и использует популярный плагин Vite PWA, который создает сотрудника службы, который использует Workbox.js под капотом. Workbox-это набор библиотек, которые могут использовать готового к работе сервисного работника для прогрессивных веб-приложений, этот шаблон может не обязательно работать для всех приложений, но для варианта использования SVGcode это здорово.

14. Наложение элементов управления окном

Чтобы максимально увеличить доступную площадь экрана, SVGcode использует 

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

Установка SVG-кода и активация настройки наложения элементов управления окном.

16. API доступа к файловой системе

Чтобы открыть входные файлы изображений и сохранить полученные SVG-файлы, я использую API доступа к файловой системе. Это позволяет мне сохранять ссылку на ранее открытые файлы и продолжать с того места, на котором я остановился, даже после перезагрузки приложения. Всякий раз, когда изображение сохраняется, оно оптимизируется с помощью библиотеки svgo, что может занять некоторое время, в зависимости от сложности SVG. Для отображения диалогового окна сохранения файла требуется жест пользователя. Поэтому важно получить дескриптор файла до того, как произойдет оптимизация SVG, чтобы пользовательский жест не был признан недействительным к моменту готовности оптимизированного SVG.

try {
  let svg = svgOutput.innerHTML;
  let handle = null;
  // To not consume the user gesture obtain the handle before preparing the
  // blob, which may take longer.
  if (supported) {
    handle = await showSaveFilePicker({
      types: [{description: 'SVG file', accept: {'image/svg+xml': ['.svg']}}],
    });
  }
  showToast(i18n.t('optimizingSVG'), Infinity);
  svg = await optimizeSVG(svg);
  showToast(i18n.t('savedSVG'));
  const blob = new Blob([svg], {type: 'image/svg+xml'});
  await fileSave(blob, {description: 'SVG file'}, handle);
} catch (err) {
  console.error(err.name, err.message);
  showToast(err.message);
}

18. Drag an drop

Для открытия входного изображения я могу либо использовать функцию открытия файла, либо, как вы видели выше, просто перетащить файл изображения в приложение. Функция открытия файлов довольно проста, более интересным является случай перетаскивания. Что особенно приятно в этом, так это то, что вы можете получить дескриптор файловой системы из элемента передачи данных с помощью этого getAsFileSystemHandle() метода. Как упоминалось ранее, я могу сохранить этот дескриптор, поэтому он будет готов, когда приложение будет перезагружено.

document.addEventListener('drop', async (event) => {
  event.preventDefault();
  dropContainer.classList.remove('dropenter');
  const item = event.dataTransfer.items[0];
  if (item.kind === 'file') {
    inputImage.addEventListener(
      'load',
      () => {
        URL.revokeObjectURL(blobURL);
      },
      {once: true},
    );
    const handle = await item.getAsFileSystemHandle();
    if (handle.kind !== 'file') {
      return;
    }
    const file = await handle.getFile();
    const blobURL = URL.createObjectURL(file);
    inputImage.src = blobURL;
    await set(FILE_HANDLE, handle);
  }
});

Для получения более подробной информации ознакомьтесь со статьей об API доступа к файловой системе и, если вам интересно, изучите исходный код SVGcode в src/js/filesystem.js.

21. API асинхронного буфера обмена

SVGcode также полностью интегрирован с буфером обмена операционной системы через API асинхронного буфера обмена. Вы можете вставить изображения из проводника операционной системы в приложение либо нажав кнопку Вставить изображение, либо нажав command или control plus v на клавиатуре.

Вставка изображения из проводника файлов в SVG-код.

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

Копирование изображения из SVG-кода в SVGOMG.

copyButton.addEventListener('click', async () => {
  let svg = svgOutput.innerHTML;
  showToast(i18n.t('optimizingSVG'), Infinity);
  svg = await optimizeSVG(svg);
  const textBlob = new Blob([svg], {type: 'text/plain'});
  const svgBlob = new Blob([svg], {type: 'image/svg+xml'});
  navigator.clipboard.write([
    new ClipboardItem({
      [svgBlob.type]: svgBlob,
      [textBlob.type]: textBlob,
    }),
  ]);
  showToast(i18n.t('copiedSVG'));
});

Чтобы узнать больше, прочтите статью "Асинхронный буфер обмена" или посмотрите файл src/js/clipboard.js.

27. Обработка файлов

Одна из моих любимых особенностей SVGcode заключается в том, насколько хорошо он сочетается с операционной системой. Как установленный PWA, он может стать обработчиком файлов или даже обработчиком файлов по умолчанию для файлов изображений. Это означает, что, когда я нахожусь в Finder на своем компьютере macOS, я могу щелкнуть правой кнопкой мыши изображение и открыть его с помощью SVG-кода. Эта функция называется обработкой файлов и работает на основе свойства file_handlers в манифесте веб-приложения и очереди запуска, которая позволяет приложению использовать переданный файл.

Открытие файла с рабочего стола с установленным приложением SVGcode.

window.launchQueue.setConsumer(async (launchParams) => {
  if (!launchParams.files.length) {
    return;
  }
  for (const handle of launchParams.files) {
    const file = await handle.getFile();
    if (file.type.startsWith('image/')) {
      const blobURL = URL.createObjectURL(file);
      inputImage.addEventListener(
        'load',
        () => {
          URL.revokeObjectURL(blobURL);
        },
        {once: true},
      );
      inputImage.src = blobURL;
      await set(FILE_HANDLE, handle);
      return;
    }
  }
});

Дополнительные сведения см. в разделе Разрешить установленным веб-приложениям быть обработчиками файлов, а также в разделе Просмотр исходного кода src/js/filehandling.js.

31. Вывод

Хорошо, это был краткий обзор некоторых расширенных функций приложения в SVGcode. Я надеюсь, что это приложение может стать важным инструментом для обработки ваших изображений наряду с другими удивительными приложениями, такими как Squoosh или SVGOMG.

SVG-код доступен по адресу svgco.de. Видишь, что я там сделал? Вы можете просмотреть его исходный код на GitHub. Обратите внимание, что, поскольку Potrace имеет лицензию GPL, то же самое относится и к SVG-коду. И с этим, счастливой векторизации! Я надеюсь, что SVGcode будет полезен, и некоторые из его функций могут вдохновить ваше следующее приложение.

SVGcode-это прогрессивное веб-приложение, которое позволяет конвертировать растровые изображения, такие как JPG, PNG, GIF, WebP, AVIF и т.д. к векторной графике в формате SVG. Он использует API доступа к файловой системе, API асинхронного буфера обмена, API обработки файлов и настройки наложения элементов управления окнами.

Похожие материалы