Функция экспорта PDF/PNG для веб-редактора

Недавно моя компания передала мне проект веб-графического редактора, в котором содержимое внутри редактора можно перемещать, поворачивать, изменять размер, маскировать, менять шрифт и т. д.

До сих пор я мог обрабатывать большую часть функций на стороне клиента. Тем не менее, я застрял на тех функциях экспорта PDF/PNG, которые вызывают у меня много головной боли. Я исследовал такие плагины, как JSPDF и HTML2Canvas, и ни один из них не может решить мою проблему (например, HTML2Canvas не поддерживает свойство clip-path css).

Мне было интересно, как такие популярные продукты, как Canva или Piktochart разработали такую ​​замечательную функцию экспорта. Поэтому я бы хотел получить совет от разработчика, имеющего опыт создания веб-редактора:

  1. Можно ли разработать функцию экспорта, просто используя технологию Front End?
  2. Какие знания необходимы для разработки функции экспорта. [Клякса? SVG ?]
  3. Есть ли что-нибудь, что Back-End может помочь в отношении этой функции?

P.S. У меня всего 2 года опыта разработки Front End и немного знаний Back End. (Да, я делаю этот проект один.)

Большое спасибо !


person Hunter Wei    schedule 15.01.2018    source источник


Ответы (1)


Существуют библиотеки JavaScript, которые вы можете использовать. Вам не нужен бэкенд.

  • html2canvas — вы можете создать холст HTML для любого содержимого HTML. Затем вы можете создать изображение PNG/JPG с холста.

  • pdf.js. Вы можете вручную создать PDF-файл, создав новую пустую страницу, и начать рисунок на нем. Вы также можете нарисовать изображение или холст в формате PDF.

Больше информации:

person Aminadav Glickshtein    schedule 15.01.2018