通過拖放合併（合併）圖像

Question

圖片此場景： 我的服務器上有一張圖片，在其中顯示草圖，並且上面有一個「空洞」區域。
然後，用戶可以上傳另一張圖片到我的服務器。

我想要實現的是這樣的： 圖片上傳完成後，會顯示第一張圖片（帶有「洞」的圖片），並在其後顯示用戶的照片，以便您可以看到它通過第一張照片的「空白洞」區域。

然後用戶可以移動他的圖片（拖動&拖放樣式），以便他可以通過「空白洞」選擇它的哪個區域是可見的。 然後我想保存結果 - 合併2張照片或將用戶圖片的位置保存在分貝中，以便稍後再顯示。
（類似於this或多或少）

我應該尋找什麼樣的技術？我猜javascript（爲拖動&下降）或HTML5或PHP（用於合併照片）？
有沒有我可以使用的任何圖書館？

我希望我的解釋不是太亂，我甚至不知道如何谷歌。

Answer 1

我不知道是否有更好的解決方案（我懷疑有），但我懷疑所有這些都可以用不太麻煩來完成。這裏有一個方法破敗來解決這個問題：

1. 使用JavaScript供電「上傳控件」，如uploadify，使您的用戶上載「他的」映像連接到服務器。服務器將對圖像執行一些處理（例如，調整大小並裁剪到合適的尺寸）並使用例如PHP的gd library。它會將「準備好的」圖像的URL返回給瀏覽器 - 所有這些都通過AJAX進行。
2. 然後瀏覽器有一個URL到用戶的圖像，所以使用更多的Javascript，你可以動態地添加一個元素，將其顯示在頁面內部，並允許用戶用它移動它。 jQuery draggable。將靜態內容背後的可拖動圖像（具有「洞」的圖像）合成爲一個細節，您將不得不使用HTML，CSS和Javascript的組合。
3. 用戶完成後，使用AJAX調用（例如again jQuery）通知服務器圖像的位置（這可通過您選擇的Javascipt框架的設施來使用）。然後，服務器可以將這兩個圖像「拼湊」在一起（gd或其他相同的東西），並返回瀏覽器一個可以訪問最終產品的URL。

當然，這裏有很多細節需要照顧，但確切知道計劃是什麼應該可以幫助您開始。

Answer 2

查看PHP GD擴展。如果安裝了它，將圖片（透明中心）合併到用戶上傳的第二張圖片上會非常容易。

看一看http://php.net/manual/en/function.imagecopymerge.php

Answer 3

好吧，讓你開始，是使用JavaScript阻力和圖像的配售路模塊。您可以記錄相對於容器的x/y座標。使用PHP圖像庫/類進行圖像合併。這樣的事情：http://www.phpclasses.org/package/3930-PHP-Generate-an-image-from-the-combination-of-2-images.html