Как сделать снимок конечного результата после удаления элемента на изображение с помощью JavaScript?

Question

Как сделать снимок конечного результата после удаления элемента на изображение с помощью JavaScript?

0

Я работаю над проектом, где мне нужно разработать систему, в которой люди могут создавать свой собственный дизайн, выбирая из определенного списка символов и изображений и выбирая фон. Я выполнил все части, касающиеся перетаскивания и т.д. Но я получил предварительный просмотр окончательного результата в одном изображении. То, что я в настоящее время предполагаю, что мне нужно получить позиции элементов в контейнере drag-and-drop (или моем холсте) и передать его в php-скрипт (я могу работать с PHP), а затем создать новое изображение, используя Библиотека изображений PHP. Но его действительно неуклюжий и расстраивающий для меня. Поэтому я здесь за советом и предложением от экспертов.

Итак, мой вопрос is- "Есть ли другие способы использования php или js, которые я могу использовать для получения желаемого результата?"

Заранее спасибо.

maksbd19 24 сен. 2013, в 20:39

Источник

Теги:

javascript

jquery

image

2 ответа

Ещё вопросы

Hoffmann · Answer 1 · 2013-09-24T16-50-00.000Z

Если у вас есть холст, вы можете просто получить содержимое холста в виде изображения (в любом расширении, которое вы хотите) в base64, используя canvas.toDataUrl(); как в этом вопросе:

Получение двоичных данных (base64) из HTML5 Canvas (readAsBinaryString)

Затем вы можете отправить его на свой сервер с помощью AJAX или действия отправки формы (используя скрытое поле). На сервере вы можете получить изображение как base64 и декодировать его в файл для сохранения в файловой системе или просто сохранить его с помощью типа blob в базе данных.

ОК, я получил идею, и она довольно интересная. Но будет ли он совместим с браузером? Как пользователи могут не иметь современных браузеров. Спасибо за Ваш ответ.
Если пользовательский браузер поддерживает тег canvas, он поддерживает метод .toDataUrl (). Это означает, что IE9 или выше, и почти все остальные. Что касается ie8, 7 и 6, есть некоторые хаки, которые заставляют работать с тэгом canvas, но я никогда не использовал их (большинство включает использование flash).

CP510 · Answer 2 · 2013-09-24T16-28-00.000Z

Вы, сэр, прямо на цель. Некоторые рекомендации по оптимизации, однако, состоят в том, чтобы передать размеры как объект JSON, таким образом вы получите массив на PHP, и вы можете иметь несколько объектов, а также поставлять каждый URL-адрес источника изображения.

Существует множество библиотек для обработки фактического поколения. Некоторые из них рассмотрены здесь http://php.net/manual/en/refs.utilspec.image.php. Существует множество учебных пособий по этому вопросу. Я могу вам сказать, вы будете использовать функцию imagecopymerge() от GD, и это сделает этот ветер. Подробнее об этой теме... Слияние двух изображений в php

Удачи и наслаждайтесь, не стесняйтесь комментировать больше вопросов.

Спасибо вам большое за ваш ответ. Из моего предыдущего опыта я обнаружил, что работа с изображениями в php немного запутывает и отнимает много времени, так как я не настолько хорош в этом. Поэтому я искал легкий выход. Во всяком случае, я нашел идею холста довольно интересной. Я буду копаться в этом. Если я не справлюсь с этим, мне придется вернуться к php :). Еще раз спасибо.
Это отличный ответ, но остерегайтесь кросс-браузерной поддержки. Полотна HTML5 поддерживаются не во всех браузерах, у вас будут проблемы в IE и Opera, а также в более старых версиях Firefox, Chrome и Safari.