Как они автоматически генерируют эти картинки?

Question

[antimodern]

Заметил интересную фишку на одном сайте. Опубликовваанные юзерами статьи автоматически получают сгенерированную картинку



Покапавшись в их коде, увидел что они это делают с помощью Cloudinary. А можно ли такое же покачеству скартинку сделать используя какие-то опен соурс тулзы, типо GraphicsMagick или их аналогов желательно с модулем под Node)?

Answer 1

[Ranwise]

так десятки или даже тысячи способов, на гитхабе поиском html to jpg и выбираете нужный вам язык, еще можно делать svg и его конвертировать в jpg

Comments

[antimodern]

При чем тут html и канвас если это генерится на беке?

[DevMan]

antimodern, и в чем проблема?

[Алексей Ярков]

antimodern, а с каких пор на бэке это невозможно сделать?

[antimodern]

DevMan, может быть в этом? (сниппет из ссылки)

var node = document.getElementById('my-node');

htmlToImage.toPng(node)
  .then(function (dataUrl) {
    var img = new Image();
    img.src = dataUrl;
    document.body.appendChild(img);
  })
  .catch(function (error) {
    console.error('oops, something went wrong!', error);
  });

[antimodern]

Алексей Ярков, а еще можно себе ногу отстрелить, но зачем?

[Ranwise]

antimodern есть безголовый хром, запускаете и генерируйте, опять же я писал про svg, текстовый формат, собираете и другим инструментом конвертируете в нужное разрешение

[antimodern]

Ranwise, честно говоря в замешательстве, т.к. не планировал решать эту задачу на канвасе (думалкакие-то библы для эффектов картинок). С другой стороны, если я правильно понимаю я смогу тупо htmlом создать некий шаблон? Это видимо проще и гибче, чем разбираться в этих консольных командах.

Можете описать шаги этого процесса? Вот прилетает на бек POST с соданной статьей, и всеми данными (название статьи, автор и тд). Что дальше?

Answer 2

[Владислав]

Первая ссылка в гугле:
https://www.npmjs.com/package/pureimage
А вот вторая: https://github.com/Automattic/node-canvas