Jcrop 中的一个错误,minSize + aspectRatio

Posted

技术标签:

【中文标题】Jcrop 中的一个错误,minSize + aspectRatio【英文标题】:A Bug in Jcrop, minSize + aspectRatio 【发布时间】:2011-06-29 00:04:48 【问题描述】:

我正在尝试将 Jcrop 用于我的应用程序,但我遇到了一个错误。我去了演示页面,那里也存在错误。这是创建它的方法。

转到此演示页面 http://deepliquid.com/projects/Jcrop/demos.php?demo=advanced

确保选中以下选项 “选择可以移动” “可调整大小的选择” “纵横比” "minSize/maxSize 设置"

创建一个选定区域,将其拖动到左上角,抓住选区的右下角(就像要调整它的大小一样)并将其拖动到图像的左上角。

一旦您通过图像的左上角,选择区域就会向下折叠为 0x0 像素选择。

此错误仅在设置纵横比时发生。否则它工作正常。

我想知道是否有人有任何使用此插件的经验来解决此错误。我整天都在经历它,但还没有弄清楚。

--编辑-- 在花了几个小时之后,我能够得到大部分修复的错误。我更改了以下代码。

        // Magic %-)
        if(xx >= x1)  // right side <-- Changed > to >=
          if(xx - x1 < min_x) 
            xx = x1 + min_x;
           else if (xx - x1 > max_x) 
            xx = x1 + max_x;
          
          if(yy > y1) 
            yy = y1 + (xx - x1)/aspect;
           else 
            yy = y1 - (xx - x1)/aspect;
          
         else if (xx <= x1)  // left side <-- Changed < to <=
          if(x1 - xx < min_x) 
            xx = x1 - min_x
           else if (x1 - xx > max_x) 
            xx = x1 - max_x;
          
          if(yy > y1) 
            yy = y1 + (x1 - xx)/aspect;
           else 
            yy = y1 - (x1 - xx)/aspect;
          
        

这阻止了它的崩溃,但它仍然表现得有些错误。

--结束编辑--

【问题讨论】:

我是 Jcrop 的作者。我知道这个问题。正如你所发现的,这非常令人烦恼。我可能需要一些社区帮助来解决它。我将查看上面的代码,看看是否可以应用这些更改。我也将尝试对其进行另一次破解。请随时通过我的网站与我联系。感谢发帖! 实际上看起来修复在 0.9.8 中只有 bug,在 0.9.9 中它实际上似乎工作得很好。我还没有跨浏览器检查。 在 0.9.9 中似乎仍然存在该错误 【参考方案1】:

一个更稳定的版本似乎如下:

if(xx===x1)xx=x1+min_x;

// Magic %-)
if (xx > x1)  // right side
    if (xx - x1 < min_x) 
        xx = x1 + min_x;
     else if (xx - x1 > max_x) 
        xx = x1 + max_x;
    
    if (yy > y1) 
        yy = y1 + (xx - x1) / aspect;
     else 
        yy = y1 - (xx - x1) / aspect;
    
 else if (xx < x1)  // left side
    if (x1 - xx < min_x) 
        xx = x1 - min_x;
     else if (x1 - xx > max_x) 
        xx = x1 - max_x;
    
    if (yy > y1) 
        yy = y1 + (x1 - xx) / aspect;
     else 
        yy = y1 - (x1 - xx) / aspect;
    

【讨论】:

【参考方案2】:

这是我的补丁,我认为它产生的行为比其他发布的更好。特别是它删除的一件事是在演示中使用 minSize 并在边缘附近切换边时看到的弹出到边缘。

@@ -578,44 +578,36 @@
         

         // Magic %-)
-        if (xx > x1)  // right side
+        if (xx >= x1)  // right side
           if (xx - x1 < min_x) 
             xx = x1 + min_x;
            else if (xx - x1 > max_x) 
             xx = x1 + max_x;
           
-          if (yy > y1) 
+          if (yy >= y1) 
             yy = y1 + (xx - x1) / aspect;
            else 
             yy = y1 - (xx - x1) / aspect;
           
-         else if (xx < x1)  // left side
+         else  // left side
           if (x1 - xx < min_x) 
             xx = x1 - min_x;
            else if (x1 - xx > max_x) 
             xx = x1 - max_x;
           
-          if (yy > y1) 
+          if (yy >= y1) 
             yy = y1 + (x1 - xx) / aspect;
            else 
             yy = y1 - (x1 - xx) / aspect;
           
         

-        if (xx < 0) 
-          x1 -= xx;
-          xx = 0;
-         else if (xx > boundx) 
-          x1 -= xx - boundx;
-          xx = boundx;
+        if (xx < 0 || xx > boundx) 
+          xx = x1 + (x1 - xx)
         

-        if (yy < 0) 
-          y1 -= yy;
-          yy = 0;
-         else if (yy > boundy) 
-          y1 -= yy - boundy;
-          yy = boundy;
+        if (yy < 0 || yy > boundy) 
+          yy = y1 + (y1 - yy)
         

【讨论】:

以上是关于Jcrop 中的一个错误,minSize + aspectRatio的主要内容,如果未能解决你的问题,请参考以下文章

jQuery Jcrop API参数说明(中文版)

Bootstrap Modal 中的 Jcrop 裁剪错误的坐标

jCrop 中的图像失真问题

JCrop 裁剪错误区域

jCrop 在更改图像时使用正确的坐标调整大小

Rails Jcrop 语法错误