裁剪圖像 - 透明

Question

我試圖使圖像裁剪「框架」的頁面。在下面的評論是jFiddle（儘管提交按鈕不工作）....我試圖做的是，圖像的部分不在裁剪框中，應該是透明的，所以用戶可以看到，圖像的哪部分被裁剪掉。我的谷歌搜索目前沒有任何結果......：/你能幫我怎麼做到這一點透明度？

Answer 1

這裏是另一種方法：

您需要2的div一個在彼此的頂部，具有相同的尺寸。 div 1將是「back」（z-index：-1）div 2將位於「front」（z-index：1）

Div 1將是圖像的容器。使用jQuery，改變div 1的背景圖像屬性，根據鼠標移動給出特定的x和y。

Div 2將在此之上，並將有一個具有正確尺寸的正方形的圖像作爲背景，該正方形將是透明的，並被半透明邊框包圍。我做了形象，爲您例如：

檢查此琴http://jsfiddle.net/gTZQv/2/

你只需要最初「中心」根據圖像尺寸例如DIV1的背景圖像：圖像的背景位置會是（不要錯過減號 「 - 」 號;））

backgroundX = -(loaded_image_width/2) + (div1width/2) 
backgroundY = -(loaded_image_height/2) + (div1height/2) 

所以CSS會像當然的（而不是實際的代碼）

background:url('http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg') [backgroundX]px [backgroundY]px; 

，並通過jQuery你只需要改變這些值，所以圖像可以用鼠標

UPDATE拖 - CODE FOR YOU：

這是一個開始：

http://jsfiddle.net/ztvyY/6/

因爲我不想重新編寫代碼，所以我使用3個div，在彼此之上，第一個將圖像作爲背景。第二個是透明邊框，第三個是我使用的空的1x1透明gif，所以你的代碼將運行，我只是通過變量來重新定位第一個div背景位置。這是一個很好的開始。您只需確保使用加載的圖像尺寸相應地初始化硬編碼數字即可。

Answer 2

我覺得這是你找什麼？

jquery image cropper