jcrop全宽/高与比例裁剪

Question

我们在系统中实施了Jcrop，到目前为止工作正常。但我们最近发现了一个小问题：

方案

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

用户上传了图片，由于我们的宽高比限制，他们看到了这一点：

---

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

（背景为对比色阴影）

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

Answer 1

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

Answer 2

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

请遵循以下流程：

1. 让用户上传图片，然后向他们展示第2页，他们可以裁剪上传的图片。
2. 一页＃2：

3. 列出项目

   （a）使用javascript计算多少区域，200：150宽高比矩形可以覆盖图像。

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

   （c）如果面积小于90％，如此200px乘63px图像的情况，更改纵横比的javascript变量，使它们完全/大致等于图像的纵横比< / strong>例如200：65。这样，用户就可以从徽标中裁剪出更完整的部分。

   （d）在你的后端脚本中，检查它的情况（b）或情况（c）。如果是（b），请使用图像处理库生成裁剪后的图像。如果是（c），则创建一个纵横比为200：150（所需比例）的白色矩形，并重叠（c）中裁剪生成的图像，然后得到所需的结果。

通过这种方式，您的案例都会被涵盖。这也不会让您的用户感到困惑，他们会非常了解裁剪是为了选择徽标的最佳部分，并且已经完成白色填充以使UI统一。

Answer 3

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

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

Answer 4

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

我希望这会有所帮助。

Answer 5

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

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

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