Jump to content

cropping a part of an image


Destramic
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

post-7825-0-57642800-1444997959_thumb.gif

 

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:

 

post-7825-0-66248700-1444998194_thumb.jpg

 

 

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
Link to comment
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?

Link to comment
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);
?>

post-3105-0-37459100-1445003101_thumb.png

post-3105-0-33814400-1445003102_thumb.png

  • Like 1
Link to comment
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

 

thanks for your help!

Link to comment
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
Link to comment
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!!!!

Link to comment
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

 

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);
Link to comment
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.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.