cropping a part of an image

[Destramic]

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 October 16, 2015 by Destramic

[requinix]

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?

[Barand]

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

[Destramic]

 

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

 

thanks for your help!

[Barand]

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.

[Barand]

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

 width='1042' height='516'

[benanamen]

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 October 17, 2015 by benanamen

[Destramic]

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

[Destramic]

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

 

thanks for your help guys!

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