Как рендерить одинаковые изображения на front-end и back-end?

Question

[Maximus_Green]

Необходимо сделать на front-end редактор изображений типа Canva/Figma, с возможностью скачать изображение на клиенте. И такой же функционал должен быть на back-end, чтобы на основе проектов пользователей рендерить массово изображения на сервере.
Посоветуйте какой стек и какие либы выбрать?

Хочется писать код чтобы он одинаково работал и на бэке и на фронте, чтобы не делать двойную работу. И чтобы изображения рендерелись идентичные и там, и там. Это реально?

Пока на фронте React.js + Canvas, а на бэке Python. Но не уверен, что это лучшее решение.

Спасибо за ваши ответы.

Answer 1

[Pavel Pikat]

Я бы писал все на знакомом Front-end стэке, ну например React + Canvas как вы написали, и рендерил это в бэке посредством Headless Chrome + Puppeteer, с конвертацией в PDF/PNG/JPG

Comments

[Maximus_Green]

Павел, спасибо за ответ.

Но не будет ли это медленно? Вы работали с этой связкой, насколько она шустрая?
Большая часть (95%) рендеринга как раз планируется на бэке, это тысячи изображений, в перспективе 100к-1кк дейли.

[Pavel Pikat]

Maximus_Green, если у вас такие запросы, то для вас и питон будет медленным. тут уже совершенно другие проблемы масшабируемости.
Я бы еще задался вопросом зачем вам миллион картинок в день генерировать на сервере?

Answer 2

[Петр Васильев]

Захватывайте изображение во время работы пользователей и сохраняйте на бэкенде.