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=en&q=jquery+crop+image&ie=UTF-8&oe=UTF-8)는 좋은 출발점이 될 것입니다. – Sparky

jQuery에는 사진 자르기 기능이 없습니다.

예를 들어 HTML5 캔버스 요소를 사용하여이를 구현할 수 있습니다. 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 나 심지어 바닐라 js에 자르기 기능이없는 경우 전환을 위해 이미지를 타일로 분할하는 슬라이더에서 어떻게 수행합니까? –

이들은 이미지를 자르지 않습니다. 이미지를 백로 윙 (backroung) 이미지로 설정하고 위치를 사용하거나 오버플로 : div로 div에 배치하고 해당 div 내에서 움직여 이미지의 일부만 표시합니다. 클립 : CSS 스타일을 사용할 수도 있습니다. –

jQuery로 사진 자르기

답변

관련 문제