jQuery裁剪圖像並觀看實時預覽

Question

確定即時通訊使用jQuery imgareaselect插件顯示覆蓋圖，該圖覆蓋了覆蓋圖的x和y座標。我希望使用這些值將實時圖像的副本剪裁給用戶。

我想我只是需要找到結構顯示圖像的HTML和CSS的最佳方式。讚賞

任何想法：）

Answer 1

與Gustavo的答案類似，您可以將圖像定位爲div（或任何元素）的背景，然後在背景圖像上使用x和y位置以及div的寬度和高度來創建裁剪圖像的框架預覽。必須使用適當的圖像庫在服務器上生成實際的裁剪文件。使用

你的榜樣，您可以更新的imgAreaSelect()的onSelectEnd處理，像這樣：

$('#ladybug').imgAreaSelect({ 
    onSelectEnd: function (img, selection) { 
     var div = $('.imgwrapper2'); 

     //image 
     div.css('background-image', 'url(' + img.src + ')'); 

     //width 
     div.css('width', selection.x2 - selection.x1); 

     //height 
     div.css('height', selection.y2 - selection.y1); 

     //x offset 
     div.css('background-position-x', -selection.x1); 

     //y offset 
     div.css('background-position-y', selection.y2); 
    } 
}); 

注意，對於背景圖像的x座標的值是selection.x1負。

Answer 2

操作必須在服務器上，JavaScript的不以最小的性能做執行。但是，您可以真實展現作物

1. 地方與croped區域
2. 設置你的圖像這個div的背景大小的div一個簡單的預覽。
3. 將背景邊距（左邊和頂部）設置爲裁剪的x和y值。