Как и почему я создал инструмент для преобразования PSD в Canvas в PDF/SVG/PNG/JPEG/JSON
Обо мне
Я фрилансер, работающий в области веб-приложений и серверных технологий/фреймворков.
Проблема, которую я хотел решить
Я создал редактор дизайна шаблонов HTML5 Canvas.
Этот редактор холста НЕ имеет возможности импортировать дизайны PSD в холст. Поэтому я хотел добавить функцию импорта PSD, которая будет очень полезна пользователям для настройки PSD и создания дизайна.
Этот редактор дизайна может добавлять элементы изображения / svg / текст / шрифты / градиенты и т. д., чтобы создавать шаблоны дизайна, которые можно настроить. У него нет возможности импортировать дизайн PSD.
Поэтому я создал отдельную функцию для импорта + преобразования дизайна PSD в холст, а затем настройки и печати. Таким образом, импортированный PSD будет добавлен на холст и может быть экспортирован в форматы PDF/SVG/PNG/JPEG после настройки объектов на холсте.
Стек технологий
Библиотека Fabric JS (fabricjs.com).
Холст HTML5.
psd.rb (библиотека парсера PSD.
Угловой (для просмотра)
TCPDF (для создания pdf)
PHP (для обработки изображений)
- psd.rb / psd.js — эта библиотека синтаксического анализатора PSD используется для анализа импортированного PSD и преобразования его в объекты холста.
- повторять слои объектов PSD.
- добавить объекты на холст
- заказать добавленные объекты.
Проблемы, с которыми я столкнулся
Ниже приведены основные проблемы, с которыми столкнулись
- преобразование на основе браузера сначала вызвало ошибку нехватки памяти при преобразовании в формат base64.
2. Порядок слоев, так как анализ и преобразование асинхронны, слои не добавляются в холст.
Обе проблемы исправлены.
Основные выводы
Парсеров/редакторов PSD на основе браузера для настройки решений PSD очень мало. Поэтому нам нужно точно настроить эти выводы, чтобы заставить их работать в реальном времени.
Советы и советы
PSD.rb (это основной парсер PSD, разработанный на ruby, который имеет некоторые обновления/сообщество, управляющее этой библиотекой.
Заключительные мысли и следующие шаги
Это завершено как доказательство концепции для моих редакторов холста, у него больше работы для точной настройки с точки зрения обработки слоя объекта шрифта / градиента / тени.
Более подробная информация о других дизайнерских редакторах, которые я разработал, находится в
