JCrop 裁剪错误区域

Posted 2023-02-25

【中文标题】JCrop 裁剪错误区域

【英文标题】：JCrop cropping the wrong area

【发布时间】：2016-05-28 14:48:58

【问题描述】：

我在实施 JCrop 方面需要一些帮助。我尝试按照手册进行操作，但每当我选择一个区域时，它实际上并不是在选择我选择的内容。相反，它占据了我选择之外的一些区域。有时，它几乎正确地占据了该区域（我认为是因为照片尺寸），但大多数情况下它占据了错误的区域。请帮忙。这是我的代码：

注意 $photo 是上传的图片。它正在正确上传，所以没有问题。

120 x 120 是我要保存上传图片的像素，以节省存储空间。此外，这里是 <img> 元素的 css，我在其中显示用于裁剪的图像：

max-width: 100%;
height: auto;
display: inline-block;
position: relative;    

这是我的 php 代码：

$twidth = 120;
$theight = 120;
$quality = 90;
$src = imagecreatefromjpeg($photo);
$dst = ImageCreateTrueColor($twidth, $theight);
$x = $_POST['x'];
$y = $_POST['y'];
$w = $_POST['w'];
$h = $_POST['h'];
imagecopyresampled($dst, $src, 0, 0, $x, $y, $twidth, $theight, $w, $h);
imagejpeg($dst, $photo, $quality);

【问题讨论】：

我已经解决了。我在第一次上传时对图像进行了重新采样，因此 jcrop 已经可以处理新的重新采样图像，而不是原始图像。图像大小确实会影响 jcropping。虽然我使图像适合我的页面，但 jcrop 实际上是在裁剪更大的原始图像；因此它没有正确裁剪。

【参考方案1】：

这里的问题是您正在使用 css 调整图像框的大小。这使脚本难以找到正确的区域。 相反，您应该使用 Jcrop 函数限制框的宽度/高度，如下所示：

$('#cropbox').Jcrop(
        boxWidth: 480,   //Maximum width you want for your bigger images
        boxHeight: 480,  //Maximum Height for your bigger images
...
);

如果您使用此 Jcrop 设置，它将占用所需区域，否则将无法按预期工作。

最好的祝福