HTML5/Javascript код для создания пользовательского изображения из шаблона

Question

Как работают такие сайты, как picfont? Или на сайтах по дизайну тортов, где у вас есть шаблон, и вы вставляете свою картинку в рамку и добавляете текст в текстовое поле?

У меня есть объявление о приглашении для программы, где люди помещают свою фотографию и имя и отправляют личное приглашение. Так что графический парень сделал шаблон. Вместо того, чтобы 1000 человек присылали ему свои фотографии и имена, я знаю, что можно разместить шаблон на веб-странице и заставить людей загружать свои фотографии, выполнять пользовательское редактирование и стилизовать их имена. КАК мне это сделать, пожалуйста? Я хотел бы, чтобы некоторые указатели или код я мог реализовать, пожалуйста. Спасибо.

Answer 1

Как уже упоминалось, вам понадобится <Canvas> элемент для этого, но это также требует некоторой пользовательской разработки.

Я позволил себе создать хорошую отправную точку: https://jsfiddle.net/Zomry/f8to2fyq/11/

Эта демонстрация загружает фоновое изображение, может вставить пользовательское изображение (здесь предполагается, что оно квадратное) и позволяет найти пользовательский текст.

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

Удачи с вашим проектом.