編輯圖片/移動「移動」（一個Facebook的個人資料圖片編輯）

Question

Facebook如何在移動「移動」關於個人資料圖片？

要查看我在說什麼，轉到：http://www.facebook.com/editprofile.php?sk=picture - >編輯縮略圖 - >請注意，您可以移動有關的縮略圖。

他們管這叫「ProfilePicSquareEditor」（其源代碼是很難在獲得）

Answer 1

這不正是Facebook的使用，但它的伎倆非常好http://odyniec.net/projects/imgareaselect/

我目前使用它在幾個項目中。

Answer 2

很明顯，有一堆JavaScript來控制裁剪窗口的拖動大小調整，如果您強制執行特定的縱橫比（或範圍），可能會稍微複雜一點（或者至少是單調乏味），但是儘可能對於HTML而言，它只是一個黑色背景div，其全部圖像位於opacity: .5之上（這創建了變暗的背景圖像），然後是位於position: absolute div中的同一圖像的另一個副本div），因此它與第一張圖像正確對齊。響應調整大小手柄的拖動事件的處理程序不斷更新絕對定位的div（'裁切窗口'）的屬性top，left,width和height，以及屬性的top和left屬性（轉爲負值） '前景'圖像以保持其與背景圖像對齊。

javascript還會跟蹤每個角落的位置，因此當用戶接受更改時，可以將這些點轉換爲像素座標（將任何縮放比例考慮在內），並將其饋送給任何圖像處理庫後端。