jcrop 全宽/高比例裁剪答案

【问题标题】：jcrop full width/height with ratio cropjcrop 全宽/高比例裁剪
【发布时间】：2013-04-01 18:32:03
【问题描述】：

我们在我们的系统中实现了Jcrop，到目前为止它运行良好。但我们最近发现了一个小问题：

场景

我们的网站允许用户上传他们公司的徽标。我们的纵横比要求是200/150，不幸的是，用户的公司徽标看起来像这样（200 x 63px）：

用户上传了图片，由于我们的纵横比限制，他们看到了这个：

问题：如何将图像裁剪为全宽或全高？我不介意 jcrop 是否将负裁剪尺寸发送回服务器，因为它应该足够聪明，可以用白色背景填充图像。最终的预期图像应如下所示：

（为了对比，背景已被着色）

jcrop 可以做到这一点，或者我们可以使用任何替代解决方案/插件吗？

【问题讨论】：

我不知道 jcrop 库，但对我来说，如果图像已经上传到服务器并归类为忽略裁剪，那么让用户选择裁剪图像听起来是多余的。
有些用户仍然喜欢裁剪，但我们的目标是能够让用户在尊重纵横比的同时选择全宽/全高。
你使用的 aspectRatio 是什么，删除它对我有用

标签： javascript jquery crop jcrop

【解决方案1】：

jcrop 没有明确的大小调整方法吗？我记得在 jcrop API 中看到过：

$.Jcrop( '#box', { trueSize: [ w, h ] });

不确定这是否允许您覆盖裁剪比例，但可能值得一试。

【讨论】：

【解决方案2】：

我不确定如何在脚本的服务器端裁剪图像，但您可以添加一个名为“使用完整图像”的额外按钮，其中发布数据 (x,y,width ,height) 将是图像的全尺寸。然后，如果比率高于预期，您只需创建与您一直想要的相同大小的图像，按宽度调整图像大小并将其放在新图像的中间。所以下面的代码只是“伪代码”来显示我在说什么。假设用户想上传一张 1000px * 200px 的图片，而你想要的比例是 200px * 150px。用户选择“完整图像大小”，因此您发送的数据非常类似于：0,0,1000,200（位置：0,0 和宽度/高度：1000、200）。在服务器端，您可以进行所有必要的计算：

$width = $_POST['width'];
$height= $_POST['height'];
$fullsize = isset($_POST['fullsize']) && $_POST['fullsize']; // If the full size mode is on.
if ($fullsize) {
  $image = new Image(0,0,200,150); // Create the image canvas with whatever plugin your using.
  if (($width/$height) > (200/150)) { // If WIDTH ratio is higher...
    $x = 0; // We already know the image will be align on the left because of the previous calculations (ratio)
    $y = (150/2) - ($height/2); // 50% top - half the image size = center.

  }
  if (($height/$width) > (150/200)) { // If HEIGHT ratio is higher...
    // Repeat previous code with adjusted values for height instead of width.
  }
  // The next part is pure fiction, i dont know what php extension you use, but lets pretend this is working.
  $newImage = new Image($x,$y,$width,$height,$file); // $file is probably the $_FILEs...
  $image->placeInsideCanvas($newImage); // Imagine this adds the image into your previously created canvas (200/150);
  $image->output();
}

我希望这会有所帮助。

【讨论】：

至少这是我要感谢的方法。我想没有办法从正面控制，按钮对他们来说不应该太苛刻。谢谢！

【解决方案3】：

我会通过设置一个单选按钮来做到这一点，该按钮允许用户从固定纵横比动态更改为任何纵横比，这样用户就可以选择照片的整个区域。

如果脚本配置正确，服务器将能够通过使用白色自动填充任何空白空间来强制将裁剪照片的结果调整为配置的最终尺寸和徽标的纵横比，而不是通过拉伸照片。

【讨论】：

【解决方案4】：

裁剪的主要目的是从图像中获取相关内容，并采用首选的纵横比。但是，如果纵横比的限制导致您丢失图像数据，那么您就可以选择填充解决方案。

遵循这个过程：

让用户上传图片，然后向他们展示 page#2 ，他们可以在其中裁剪上传的图片。
一页#2：
列表项

(a) 使用 javascript 计算一个 200:150 纵横比的矩形可以在图像上覆盖多少面积。

(b) 如果此区域超过 90%（或您想要的任何值），允许用户裁剪，您将获得符合您的纵横比要求的相关结果。

(c) 如果面积小于 90%，例如这张 200 像素 x 63 像素的图像，更改纵横比的 javascript 变量，使它们完全/大致等于图像的纵横比例如 200:65。这样，用户将能够从徽标中裁剪出更完整的部分。

(d) 在您的后端脚本中，检查它的大小写 (b) 还是大小写 (c)。如果是 (b)，请使用您的图像处理库来生成裁剪后的图像。如果是 (c)，则创建一个宽高比为 200:150（您想要的比例）的白色矩形，并与 (c) 中通过裁剪生成的图像重叠，即可得到您想要的结果。

这样，您的两种情况都被覆盖了。这也不会让您的用户感到困惑，他们会很好地理解裁剪是为了选择徽标的最佳部分，并且已经完成了白色填充以使 UI 统一。

【讨论】：

谢谢，但是分页很乏味。我会采用 Bene 建议的方法，一个关闭 JCrop 并裁剪完整尺寸的按钮。

【解决方案5】：

您应该在 200/150 框（或其他一些尺寸，但具有此 w/h 比）上向他展示裁剪工具，您可以在其中加载并显示他上传的图像居中，而不是在他上传的图像上。

【讨论】：