# cropping a part of an image

Go to solution Solved by Barand,

## Recommended Posts

hey guys i'm trying to crop a certain part of a image using imagecopyresized...i'm using js to get the coordinates of the image and the selected area that i'm after

here is how i get the co-ordinates:

```var offset = image.position(),
image_x  = offset.left,
image_y  = offset.top,
image_x2 = selected.width(),
image_y2 = selected.height(),

offset      = selected.position(),
selected_x  = offset.left,
selected_y  = offset.top,
selected_x2 = selected.width(),
selected_y2 = selected.height();
```

co-ordinates

```image
-----------------
x = 8
y = 8

selected area
-----------------
x = 172
y = 75
x2 = 327
y2 = 292
```

i'm then using this function to try and get just the selected area as a image but it's not outputting correctley

```function crop(\$image, \$selected_x = 0, \$selected_y = 0, \$image_x = 0, \$image_y = 0, \$selected_width = null, \$selected_height = null)
{
list(\$width, \$height) = getimagesize(\$image);

\$thumbnail    = imagecreatetruecolor(\$width, \$height);
\$image_source = imagecreatefromjpeg(\$image);

imagecopyresized(\$thumbnail, \$image_source, \$selected_x, \$selected_y, \$image_x, \$image_y, \$selected_width, \$selected_height, \$width, \$height);
imagejpeg(\$thumbnail, "image-cropped.jpg", 100);
}

crop('image.jpg', 172, 75, 8, 8, 327, 292);
```

image output:

is it possible to get the selected image in the blue grid saved as a image please?

any help on what i'm doing wrong would be great..please let me know if you need more info

thank you

Edited by Destramic
##### Share on other sites

Your code is a bit... messed up, with the values. Which is why you're getting something completely different than what you want to get.

What is \$image_x and _y for? I'm guessing that the thumbnail is supposed to be {\$image_x}x{\$image_y} in size? But isn't 8x8 tiny for a thumbnail?

##### Share on other sites

• Solution

Is this what you are trying to achieve?

```<?php
\$x1 = 224;
\$y1 = 94;
\$x2 = 663;
\$y2 = 487;

\$w = \$x2-\$x1;
\$h = \$y2-\$y1;

\$im = imagecreatetruecolor(\$w, \$h);
\$src = imagecreatefrompng('leopard.png');

imagecopyresized(\$im,\$src,0,0,\$x1,\$y1,\$w,\$h,\$w,\$h);

imagepng(\$im, 'leopard_cropped.png');
imagedestroy(\$im);
imagedestroy(\$src);
?>
```

##### Share on other sites

Is this what you are trying to achieve?

yes thank you ...seems i was no where close to what i wanted haha...i'm bit confused on your x, y positions barand...obviously mine must be wrong but how are you getting yours please?

i'd like to get by JavaScript if possible

##### Share on other sites

I got the x,y by opening the image in an image editor and hovering the mouse to see the coordinates. However, by using a grabbed image there is no guarantee that my copy is the same size as your original, hence the difference.

##### Share on other sites

I checked my original leopard.png image properties. I have

``` width='1042' height='516'
```
##### Share on other sites

I think the ingredient your missing is something like Jcrop. You just drag over the image for the coordinates. There are many, many sources for this kind of functionality. Many options for cropping the image. Simple to use. Why re-invent the wheel?

http://deepliquid.com/projects/Jcrop/demos.php

Edited by benanamen
##### Share on other sites

I think the ingredient your missing is something like Jcrop. You just drag over the image for the coordinates. There are many, many sources for this kind of functionality. Many options for cropping the image. Simple to use. Why re-invent the wheel?

http://deepliquid.com/projects/Jcrop/demos.php

thanks but i've made my own cropper (with help from scootstah) as seen here:  http://jsfiddle.net/destramic/ybq2mab5/

barand thank you for help...worked perfectly ....sorry for such a late reply

also using the following worked great to get selected part of image.

```var selected = \$('whatever'),
offset      = selected.position(),
selected_x  = offset.left,
selected_y  = offset.top,
selected_x2 = selected.width(),
selected_y2 = selected.height();
```

i will try and post my code to help future developers when i'm done (hopefully in the next couple of weeks)

thanks guys!!!!

##### Share on other sites

Hey guys just wanted to post the cropping function i made.

which goes well with something like this: http://jsfiddle.net/...ramic/ybq2mab5/

if the image you are cropping is smaller/bigger or same size as orginal it will return crop exact for orginal image...works with x y co-ordinates too...hope it can help someone as much as it's helped me

```function crop(\$image_source, \$selected_x, \$selected_y, \$selected_x2, \$selected_y2, \$image_x = null, \$image_y = null, \$image_x2 = null, \$image_y2 = null)
{
list(\$orginal_x2, \$orginal_y2) = getimagesize(\$image_source);

if (!is_null(\$image_x))
{
if (is_null(\$image_x2) || \$image_x2 === \$orginal_x2)
{
\$selected_x -= \$image_x;
}
else if (\$image_x2 > \$orginal_x2)
{
\$difference        = ((\$image_x2 - \$orginal_x2) / \$image_x2 * 100);
\$image_difference  = \$image_x * ((100 - \$difference) / 100);
\$select_difference = \$selected_x * ((100 - \$difference) / 100);

\$selected_x = (\$select_difference - \$image_difference);
}
else if (\$image_x2 < \$orginal_x2)
{
\$difference        = (\$orginal_x2 / \$image_x2);
\$image_difference  = \$image_x * \$difference;
\$select_difference = \$selected_x * \$difference;

\$selected_x = (\$select_difference - \$image_difference);
}
}

if (!is_null(\$image_y))
{
if (is_null(\$image_y2) || \$image_y2 === \$orginal_y2)
{
\$selected_y -= \$image_y;
}
else if (\$image_y2 > \$orginal_y2)
{
\$difference        = ((\$image_y2 - \$orginal_y2) / \$image_y2 * 100);
\$image_difference  = \$image_y * ((100 - \$difference) / 100);
\$select_difference = \$selected_y * ((100 - \$difference) / 100);

\$selected_y = (\$select_difference - \$image_difference);
}
else if (\$image_y2 < \$orginal_y2)
{
\$difference        = (\$orginal_y2 / \$image_y2);
\$image_difference  = \$image_y * \$difference;
\$select_difference = \$selected_y * \$difference;

\$selected_y = (\$select_difference - \$image_difference);
}
}

if (!is_null(\$image_x2))
{
if (\$image_x2 > \$orginal_x2)
{
\$width_difference = ((\$image_x2 - \$orginal_x2) / \$image_x2 * 100);
\$selected_x2     *= ((100 - \$width_difference) / 100);
}
else if (\$image_x2 < \$orginal_x2)
{
\$width_difference = ((\$orginal_x2 - \$image_x2) / \$image_x2 * 100);
\$selected_x2     *= (1 + \$width_difference / 100);
}
else
{
\$width_difference = 100 - ((\$image_x2 - \$selected_x2) / \$image_x2 * 100);
\$selected_x2      = \$width_difference / 100 * \$orginal_x2;
}
}

if (!is_null(\$image_y2))
{
if (\$image_y2 > \$orginal_y2)
{
\$height_difference = ((\$image_y2 - \$orginal_y2) / \$image_y2 * 100);
\$selected_y2      *= ((100 - \$height_difference) / 100);
}
else if (\$image_y2 < \$orginal_y2)
{
\$height_difference = ((\$orginal_y2 - \$image_y2) / \$image_y2 * 100);
\$selected_y2      *= (1 + \$height_difference / 100);
}
else
{
\$height_difference = 100 - ((\$image_y2 - \$selected_y2) / \$image_y2 * 100);
\$selected_y2       = \$height_difference / 100 * \$orginal_y2;
}
}

\$image        = imagecreatetruecolor(\$selected_x2, \$selected_y2);
\$image_source = imagecreatefrompng(\$image_source);

imagecopyresized(\$image, \$image_source, 0, 0, \$selected_x, \$selected_y, \$selected_x2, \$selected_y2, \$selected_x2, \$selected_y2);
imagepng(\$image, 'percentage.png');

imagedestroy(\$image);
imagedestroy(\$image_source);
}

crop('image.png', 302, 1008, 525, 445, 23, 20, 2000, 1600);
```
##### Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

## Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

×   Pasted as rich text.   Restore formatting

Only 75 emoji are allowed.