2

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

设想

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

200x63

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

在此处输入图像描述

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

在此处输入图像描述

（为了对比，背景已经被阴影化了）

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

4

5 回答 5

2

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

于 2013-04-12T08:04:29.570 回答
1

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

遵循这个过程：

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

  3. 项目清单

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

    (b) 如果这个区域超过 90%（或者你想要的任何值），允许用户裁剪，你会得到一个相关的结果，这将符合你的纵横比要求。

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

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

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

于 2013-04-12T07:56:14.740 回答
1

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

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

于 2013-04-12T22:06:09.813 回答
1

我不确定你如何在脚本的服务器端裁剪图像，但你可以做的是添加一个名为“使用完整图像”的额外按钮，其中发布数据 (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();
}

我希望这有帮助。

于 2013-04-16T17:03:03.010 回答
0

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

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

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

于 2013-04-16T17:40:40.333 回答