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 square。从这个插件我可以得到用户选择的右上角和左下角坐标（x1，y1，x2，y2）当他们点击完成后我想使用这些信息正确缩放图片并正确对齐图片以填充在主要的300x300显示图片中。任何人都可以给我这样做的基本逻辑吗？

**编辑

我尝试过以下操作，但它无效：

// javascript //其中selection是用户选择坐标

                 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");

如何根据用户选择进行图像缩放

1 个答案: