【问题标题】:How to crop a image with php using jquery imgAreaSelect?如何使用 jquery imgAreaSelect 用 php 裁剪图像?
【发布时间】:2013-08-25 01:43:07
【问题描述】:

我正在使用以下 javascript 代码实例化 jquery imgAreaSelect 以裁剪我的图像。

$(document).ready(function () {
    $('#ladybug').imgAreaSelect({
        onSelectEnd: function (img, selection) {
            $('input[name="x1"]').val(selection.x1);
            $('input[name="y1"]').val(selection.y1);
            $('input[name="x2"]').val(selection.x2);
            $('input[name="y2"]').val(selection.y2);            
        }
    });
});

这与以下(示例)html 代码有关:

<div>
    <img id="ladybug" src="ladybug.jpg" alt="" />
</div>

<div>
   <form action="#" method="post">
      <input id="x1" type="hidden" name="x1" value="" />
      <input id="y1" type="hidden" name="y1" value="" />
      <input id="x2" type="hidden" name="x2" value="" />
      <input id="y2" type="hidden" name="y2" value="" />
      <input type="submit" name="submit" value="Submit" />
   </form>
</div>

这非常有效,我在提交表单时将所有正确的信息返回给 php。但是,现在我必须使用 php 通过表单刚刚发送的坐标来修改图像。这比我想的要难。

$image_info = getimagesize($filename);
$image = imagecreatefromjpeg($filename);

$width = imagesx($image);
$height = imagesy($image);

$resized_width = ((int)$formData["x2"]) - ((int)$formData["x1"]);
$resized_height = ((int)$formData["y2"]) - ((int)$formData["y1"]);

$resized_image = imagecreatetruecolor($resized_width, $resized_height);
imagecopyresampled($resized_image, $image, 0, 0, (int)$formData["x1"], (int)$formData["y1"], $resized_width , $resized_height, $width, $height);
imagejpeg($resized_image, $filename);

上面的脚本可以工作,但是它以错误的方式使用了坐标/宽度/高度。我总是在调整大小的图像中留下一个黑色的大边框:

谁能给我指明正确的方向?

【问题讨论】:

    标签: php image jquery-plugins crop


    【解决方案1】:

    将以imagecopyresampled 开头的行替换为以下内容:

    imagecopyresampled($resized_image, $image, 0, 0, (int)$formData["x1"], (int)$formData["y1"], $width, $height, $width, $height);

    imagecopyresampled() 将从位置 (src_x,src_y) 处宽度为 src_w 和高度 src_h 的 src_image 获取一个矩形区域,并将其放置在位置 (dst_x,dst_y) 处宽度为 dst_w 和高度 dst_h 的 dst_image 矩形区域中。

    【讨论】:

      猜你喜欢
      • 2011-11-13
      • 1970-01-01
      • 1970-01-01
      • 2014-12-27
      • 1970-01-01
      • 2017-04-05
      • 1970-01-01
      • 2011-06-25
      相关资源
      最近更新 更多