Создание GIF-файлов и PNG-файлов в JavaScript

#javascript #electron #png #gif

Вопрос:

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

Пример: у меня есть 3 головы, 3 тела и 3 вида оружия монстра, и я хотел бы создать все возможные комбинации, умножить на цветовые схемы и экспортировать в файлы PNG или GIF.

Я изучаю JS уже некоторое время, и я хотел создать такое приложение в Electron, но мне трудно найти учебные ресурсы по обработке изображений в JS. Я посмотрел здесь в стеке, но много похожих вопросов относятся к ~ 2009, и они ссылаются на несуществующие документы MDN.

Не могли бы вы, пожалуйста, подсказать мне направление? Я нашел несколько руководств по обработке HTML canvas, но в основном они применяли фильтры к JPG.

Ответ №1:

проверьте эту библиотеку: html2canvas

просто выберите контейнер вашей комбинации, и он выполнит свою работу.

 html2canvas(document.body).then(function(canvas) {
    var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
});