Объединять (объединять) изображения с помощью перетаскивания

Question

Изображение этого сценария: на моем сервере локально есть изображение, на котором отображается эскиз, и на нем есть область «пустой дыры».
Затем пользователь может загрузить другое изображение на мой сервер.

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

Затем пользователь может переместить свою картинку (стиль перетаскивания), чтобы он мог выбрать, какая ее область видна через «пустое отверстие».Затем я хотел бы сохранить результат - объединяя 2 фотографии или сохраняя положение изображения пользователя в БД, чтобы я мог отобразить его снова позже.

Какую технологию я должен искать?Я думаю, javascript (для перетаскивания) или html5 или php (для слияния фотографии)?
Есть ли библиотеки, которые я могу использовать?

Надеюсь, мои объяснения не слишком запутанны, я даже не знал, как это сделать.

Answer 1

Хорошо, чтобы начать, да, используйте JavaScript-модуль перетаскивания для размещения изображения. Вы можете записать х / у кординаты относительно контейнера. Выполните слияние изображений с библиотекой изображений PHP / Class. Примерно так: http://www.phpclasses.org/package/3930-PHP-Generate-an-image-from-the-combination-of-2-images.html

Answer 2

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

1. Используйте «загрузочный виджет» на основе JavaScript, такой как uploadify , чтобы позволить вашему пользователю загружать «свое» изображение всервер.Сервер выполнит некоторую обработку изображения (например, изменит размеры и обрезает до подходящих размеров) и сохранит его, используя, например, PHP gd library .Он вернет URL-адрес «подготовленного» изображения обратно в браузер - все это через AJAX.
2. В браузере есть URL-адрес изображения пользователя, поэтому, используя больше Javascript, вы можете динамически добавлять элементкоторый отображает его внутри страницы и позволяет пользователю перемещать его, например, с помощью jQuery draggable .Композиция перетаскиваемого изображения за статическим содержимым (изображение с «дырой») - это деталь, которую вам необходимо позаботиться, используя комбинацию HTML, CSS и снова Javascript.
3. Когда пользователь закончит,используйте AJAX-вызов (например, снова jQuery ), чтобы проинформировать сервер о позиционировании изображения (это будет доступно через средства выбранной вами платформы Javascipt).Затем сервер может «составить» два изображения вместе (gd или что-то эквивалентное еще раз) и вернуть браузеру URL-адрес, по которому можно получить доступ к конечному продукту.

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

Answer 3

Посмотрите на расширение PHP GD.Если он установлен, довольно легко иметь изображение (с прозрачным центром), которое будет объединено поверх второго изображения, которое пользователь будет загружать.