作物全宽/高比作物
我们在我们的系统中实现了杰夫勒，到目前为止它运行良好。但我们最近发现了一个小问题：
场景
我们的网站允许用户上传他们公司的标志。我们的纵横比要求是200/150，不幸的是，用户的公司徽标看起来如下(200x63px)：
用户上传了图像，由于我们的高宽比限制，他们看到：
问题：如何将裁剪到图像的全宽或全高度？我不介意jcrop是否将负裁剪维度发送回服务器，因为它应该足够聪明，能够用白色背景填充图像。最终的、预期的图像应该如下所示：
(背景已被阴影化以作对比之用)
要么是jcrop可以做到，要么是我们可以使用其他解决方案/插件？
回答 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();
}希望这能帮上忙。
Stack Overflow用户
发布于 2013-04-12 00:04:29
您应该向他展示200/150框上的裁剪工具(或其他一些维度，但以这个w/h比)，在这里加载和显示他的上传图像，而不是以他上传的图像为中心。
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统一。
https://stackoverflow.com/questions/15917003
复制
腾讯云开发者
