사용자 선택과 이미지 크기에

Question

은 내가 최대 300x300 이미지가 어떻게 :

<style> 
     #profileImage, #profilePP { 
     max-width: 300px; 
     max-height: 300px; 
     min-width: 50px; 
     min-height: 50px; 
    } 

    #profileBox { 
     width:300px; 
     height:300px; 
     overflow:hidden; 
    } 
    </style> 

    <!-- html extract --> 
     <div id="profileBox"> 
      <img src="check.png'" id="profileImage"> 
     </div> 

나는 사용자가 내가 또한 최대 폭과 300 픽셀의 최대 높이의 수 있도록 확장 <input type="file"를 사용하여 이미지를 선택할 수를 . 그런 다음 사용자가 원하는 이미지의 일부를 선택할 수있는 플러그인이 있습니다. 선택하면 너비 또는 높이 중 작은 값을 사용하고 가로 세로 비율을 1 : 1 Ie square로 설정합니다. 이 플러그 인에서 사용자 선택 (x1, y1, x2, y2)의 오른쪽 위 및 아래 왼쪽 좌표를 가져올 수 있습니다.이 정보를 사용하여이 정보를 사용하여 그림을 올바르게 축척하고 그림을 올바르게 채울 기본 300x300 디스플레이 이미지 누구든지이 일을 수행하는 데 필요한 기본 논리를 제공 할 수 있습니까?

** 편집

나는 다음하지만 작동하지 않습니다 시도 :

는

// 자바 스크립트 // 선택이고 사용자 선택의 좌표는

    var wh = selection.x2 - selection.x1; 
       var constHeight=parseInt($("#profileBox").css("width")); 

       var proportion=constHeight/wh; 
       var maxHeight=constHeight* proportion; 
       var maxWidth=constHeight* proportion; 

       $("#profileImage").attr("src",$("#profilePP").attr("src")); 
       $("#profileImage").css("margin-top","-"+selection.y1+"px"); 
       $("#profileImage").css("margin-left","-"+selection.x1+"px"); 
       $("#profileImage").css("max-height",maxHeight+"px"); 
       $("#profileImage").css("max-width",maxWidth+"px"); 

Answer 1

좋아, 내가 생각 나는 그것을 아래에서 해결했다. 또한 사용자 선택이 너무 작아지고 x 또는 y 값을 아무 것도하지 않으면 결국 오버 플로우가 발생할 수 있다는 것을 명심하라. 이 문제를 해결하기위한 방법은 오버플로가 발생하기 전에 최소 선택 량이 보장되도록하는 것입니다 ...

    var constHeight=parseInt($("#profileBox").css("width")); 
       var proportion=constHeight/ (selection.y2 - selection.y1); 
       var maxHeight=constHeight* proportion; 
       var maxWidth=constHeight* proportion; 

       var moveX=selection.x1*proportion; 
       var moveY=selection.y1*proportion; 

       $("#profileImage").attr("src",$("#profilePP").attr("src")); 
       $("#profileImage").css("margin-top","-"+moveY+"px"); 
       $("#profileImage").css("margin-left","-"+moveX+"px"); 
       $("#profileImage").css("max-height",maxHeight+"px"); 
       $("#profileImage").css("max-width",maxWidth+"px");