如何使用jQuery imgAreaSelect用php裁剪图像? [英] How to crop a image with php using jquery imgAreaSelect?

问题描述

我正在使用以下JavaScript代码来实例化 imgAreaSelect 的jQuery. >

$(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);

上面的脚本有效，但是它以错误的方式使用了坐标/宽度/高度.在调整大小后的图片中，我总是留下黑色的大边框:

任何人都可以朝正确的方向设置我吗?

解决方案

使用以下内容替换以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矩形区域中. /p>

i'm using the following javascript code to instanciete jquery imgAreaSelect to crop my image.

$(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);            
        }
    });
});

This relates to the following (example) html code:

<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>

This works perfectly, i'm getting all the right information back to php when submitting the form. However, now i have to use php to modify the image by the coordinates that the form just send. And this was harder then i thought.

$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);

The above script works but it uses the coordinates/width/height in the wrong way. i'm always left over with a big black border in the resized image:

Can anyone set me in the right direction?

解决方案

Replacing the line that starts with imagecopyresampled with the following should do it:

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

imagecopyresampled() will take a rectangular area from src_image of width src_w and height src_h at position (src_x,src_y) and place it in a rectangular area of dst_image of width dst_w and height dst_h at position (dst_x,dst_y).

这篇关于如何使用jQuery imgAreaSelect用php裁剪图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！