问作物全宽/高比作物
EN

Stack Overflow用户

提问于 2013-04-09 20:34:00

回答 5查看 3.6K关注 0票数 2

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

场景

我们的网站允许用户上传他们公司的标志。我们的纵横比要求是200/150，不幸的是，用户的公司徽标看起来如下(200x63px)：

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

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

(背景已被阴影化以作对比之用)

要么是jcrop可以做到，要么是我们可以使用其他解决方案/插件？

jquery

crop

jcrop

javascript

游戏品类场景解决方案

腾讯云为客户提供领先的互联网接入服务，满足游戏客户对高性能计算、高品质网络服务、完善的网络防攻击能力等要求

回答 5

Stack Overflow用户

回答已采纳

发布于 2013-04-16 09:03:03

我不知道如何在脚本的服务器端裁剪图像，但您可以做的是添加一个名为“使用完整图像”的额外按钮，其中post数据(x、y、宽度、高度)将是图像的全部大小。然后，如果该比率高于预期，您只需创建您的图像大小与您一直想要的，调整大小的图像宽度，并将它放在您的新图像的中间。因此，下面的代码只是“伪代码”，以显示我在说什么。假设用户希望上传的图片是1000 to *200 to，而您想要的比例是200 to*150 to。用户选择“完整图像大小”，所以您发送的数据大致如下:0,1000,200(位置: 0,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();
}

希望这能帮上忙。

票数 1

Stack Overflow用户

发布于 2013-04-12 00:04:29

您应该向他展示200/150框上的裁剪工具(或其他一些维度，但以这个w/h比)，在这里加载和显示他的上传图像，而不是以他上传的图像为中心。

票数 2

Stack Overflow用户

发布于 2013-04-11 23:56:14

裁剪的主要目的是从图像中获取相关内容，并以优先的高宽比进行裁剪。但是，如果对高宽比的限制导致您丢失图像数据，那么您应该选择填充解决方案。

遵循这一过程：

让用户上传图像，然后向他们展示page#2，在那里他们可以裁剪上传的图像。
一个page#2：
列表项目 (a)使用javascript计算图像上一个200:150长宽比矩形可以覆盖的面积。 (b)如果这个区域超过90% (或任何你想要的值)，允许用户裁剪，你将得到一个相关的结果，这将符合你的纵横比要求。 (c)如果面积小于90%，如这200 of乘63 of图像的情况，将javascript变量更改为高宽比，使其与图像的纵横比(例如200:65 )完全/大致相等。这样，用户将能够从徽标中裁剪出更完整的部件。 (d)在你的后端脚本中，检查其案例(b)或(c)。如果是(b)，使用图像处理库只生成裁剪的图像。如果它(c)，创建一个宽径比为200:150的白色矩形(您想要的比率)，并将(C)中裁剪生成的图像重叠，您就会得到您想要的结果。

这样，你的两个案子都能办到。而且这也不会混淆你的用户，他们会很好地理解裁剪是为了选择最好的部分的标志，而白色的填充已经做了使UI统一。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/15917003

复制

Salesforce Tableau CRM Dashboards，为查询条件设置默认值

sql unity

Dashboards查询条件，默认情况下，查询所有担当者的金额情报，如下也可以进行自由选择，选择特定用户的情报。

repick

2022/04/24

1.3K0