使用jquery修剪圖像

我正在尋找用戶上傳圖像，然後將它裁剪成一定尺寸。我想要發生的事情本質上是一個div，它被設置爲特定的裁剪尺寸以及該框內的圖像。用戶將能夠滑動圖像，並且該div中可見的任何東西都是該圖像將被裁剪到的東西。使用jquery修剪圖像

我遇到的所有jquery插件只是讓用戶圍繞整個圖像移動選擇框，而不是將圖像移動到選擇框後面。這種事情是否存在，我只是錯過了那個插件？

基本上它就像Facebook中的縮略圖編輯器，您可以在縮略圖大小的框中拖動圖像。

2012-04-22 nbu

你並不真的需要一個插件。這可以通過設置背景位置值由香草jQuery和CSS來完成。

<div id="CroppedImageDiv"></div> 
<script type="text/javascript"> 
    function cropImage(imgUrl, cropWidth, cropHeight, cropStartX, cropStartY) { 
     var bgPos = cropStartX + "px " + cropStartY + "px"; 
     $('#CroppedImageDiv').width(cropWidth).height(cropheight).css('background-position', bgPos); 
     $('#CroppedImageDiv').css('background-url', imgUrl); 
    } 
</script>

來源

2012-04-22 02:45:54

這不會給我aroung拖動圖像，雖然能力強，對不對？這只是爲了確定最終的圖像作物？對不起，我是一個JavaScript/jQuery初學者。 – nbu 2012-04-23 00:51:13

是的，這段代碼只是在DIV中顯示最終裁剪後的圖像。對於實際的裁剪操作，您可以查看JCrop代碼以獲得靈感，但對於jQuery初學者來說，這可能具有挑戰性...... – 2012-04-23 09:26:43