裁剪圖像使用jQuery

-1

能取悅有人向我解釋或使我如何修剪出的JavaScript/jQuery的圖片的方式嗎？我不是在尋找一個插件，我想了解它是如何完成和使用它的。我也不希望div與背景位置操縱。我想剪裁實際的圖片。但僅限於客戶端用途。我不需要掛鉤來保存裁剪後的圖片。裁剪圖像使用jQuery

來源

2012-06-15 Sven Bieder

你的代碼在哪裏？你有沒有嘗試過任何東西？ http://meta.stackexchange.com/a/128553/157574 – Sparky

到目前爲止，我無法嘗試任何操作，因爲我找不到任何入口點。 –

不想使用插件並不妨礙您查看插件的源代碼。那麼[this]（http://www.google.com/search?client=safari&rls=zh-CN&q=jquery+crop+image&ie=UTF-8&oe=UTF-8）將是一個很好的起點。 – Sparky

jQuery有沒有圖片裁剪功能。

例如，你可以使用HTML5 canvas元素來實現這一目標。這裏是一個tutorial：

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style> 
     body { 
     margin: 0px; 
     padding: 0px; 
     } 
     #myCanvas { 
     border: 1px solid #9C9898; 
     } 
    </style> 
    <script> 
     window.onload = function() { 
     var canvas = document.getElementById("myCanvas"); 
     var context = canvas.getContext("2d"); 
     var imageObj = new Image(); 

     imageObj.onload = function() { 
      // draw cropped image 
      var sourceX = 150; 
      var sourceY = 0; 
      var sourceWidth = 150; 
      var sourceHeight = 150; 
      var destWidth = sourceWidth; 
      var destHeight = sourceHeight; 
      var destX = canvas.width/2 - destWidth/2; 
      var destY = canvas.height/2 - destHeight/2; 

      context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight); 
     }; 
     imageObj.src = "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg"; 
     }; 

    </script> 
    </head> 
    <body> 
    <canvas id="myCanvas" width="578" height="400"></canvas> 
    </body> 
</html>

來源

2012-06-15 17:55:29

如果jQuery，或者甚至是vanilla js沒有裁剪功能，他們是如何在滑塊中將圖片切片爲切片的切片？ –

那些不裁剪圖像，他們只是通過將圖像設置爲背景圖像並使用該位置來顯示圖像的一部分，或者將其放置在具有溢出的div中：隱藏並在該div內移動它。剪輯：CSS樣式也可以使用。 –

裁剪圖像使用jQuery

回答

相關問題