Как масштаб изображения с выбором пользователя

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> 

Я позволяет пользователю выбрать изображение с помощью <input type="file", который я также масштабироваться, чтобы убедиться, что это не более ширины и макс-высота 300px , У меня есть плагин, который затем позволяет пользователю выбирать часть изображения, которое они хотят. Выбор занимает меньшую ширину или высоту и устанавливает соотношение сторон, так что это 1: 1 I.e квадрат. Из этого pluggin я могу получить правую и нижнюю левые координаты выбора пользователя (x1, y1, x2, y2). Когда они нажимают кнопку мыши, я хочу использовать эту информацию для правильного масштабирования изображения и правильного выравнивания изображения для заполнения в основной экранной картинке 300x300. Может ли кто-нибудь дать мне основную логику, мне нужно было бы это сделать?

** EDIT

Я попытался следующие, но это не работает:

// Javascript // где выбор является выбор пользователем координаты

    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

Ok я думаю я решил это с нижеследующим, также имейте в виду, что вы можете получить переполнение, если выбор пользователя слишком мал, и вы в конечном итоге нажимаете значения 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");