Использование PiL для создания снимка экрана HTML / CSS

Question

Я хочу, чтобы пользователь на веб-сайте мог загружать изображение и писать поверх него текст. Кроме того, они должны иметь возможность обрезать / масштабировать / перемещать изображение и текст. Для этого я могу сделать это в jQuery.

После того, как они сделали изображение так, как они хотят, есть ли способ, которым я могу сделать снимок этого изображения (используя PiL) и сохранить его на сервере?

Каков наилучший / правильный способ сделать это?

Answer 1

Создание «скриншота» изображения не является ни лучшим, ни правильным способом сделать это. Чтобы сделать снимок экрана, необходимо выполнить код на клиентском компьютере, что «невозможно» в сценарии веб-сайта.

Взгляните на lolcat builder (сейчас я не могу вспомнить более серьезный пример;). Каждый раз, когда вы нажимаете кнопку «Просмотр», изображение обновляется с URL-адресом, содержащим текст, его стиль и положение. Запрос обрабатывается сервером, который создает новое изображение для отображения.

Answer 2

Полагаю, у вас есть Python на стороне сервера.

Лучший способ для imo - каким-то образом «получить» все параметры редактирования от клиента, а затем повторно обработать его, используя PIL.

Обновление: как я это сделаю На стороне сервера вам нужен URL для обработки сообщений. На стороне клиента (после каждого редактирования) отправьте сообщение по этому URL с параметрами редактирования. Я думаю, что это не простое решение.

Может быть, если вы не используете PIL для визуализации конечного изображения, а только запоминаете параметры, каждый вид из клиентов может отображаться сам?

Answer 3

Ну, даже если бы другие пытались отговорить вас от этого, это, вероятно, не было бы так сложно.

На стороне клиента вы определяете div, который перемещается / изменяет размер по изображению с прозрачностью, которую можно масштабировать для кадрирования.

Переместите, я предполагаю, что это применимо только к тексту, поэтому вы динамически создаете перетаскиваемые отрезки на стороне клиента, все еще легко.

Масштаб, у меня нет идеи простого пользовательского интерфейса, чтобы сделать это.

Когда вы хотите обновить свое изображение, вы сериализуете свои данные (положение делительной области обрезки и положение ваших текстовых диапазонов / масштабирования относительно позиции к изображению.) Затем, используя json или что-либо подобное, вам нужно , вы передаете данные на сервер.

Затем на сервере, используя python / PIL, вы воспроизводите преобразование, которое вы сериализовали.

Answer 4

PIL недоступен на стороне клиента ... поэтому, если, как предполагает Джек Ха, вы не собираетесь загружать все инструкции по редактированию вашего изображения на сервер и повторно выполнять их, это не вариант. Я бы избегал этого, потому что вам нужно было бы реализовать одинаковые процедуры редактирования как на клиенте, так и на сервере, удваивая размер вашей кодовой базы. (Возможно, если ваш серверный код был написан на Javascript, это имело бы смысл, поэтому код для рисования можно было бы использовать повторно.)

Вместо этого найдите библиотеку Javascript, которая выполняет манипулирование изображениями на стороне клиента, и пусть браузер загрузит окончательное отредактированное изображение. Я не знаком с опциями в этой области, но быстрый поиск в Google показал это , который использует элемент canvas для хранения данных пикселей.