Comments on: Ajax Image Manipulation

By: London

London — Mon, 26 Mar 2007 05:40:03 +0000

Hi, Nice widget .. we wrote such a functionlity in java on server side and exposed it thru a REST url

By: bbuffone

bbuffone — Wed, 14 Mar 2007 00:42:30 +0000

Not sure what happened to the image but it’s back.

Bob (Buffone)

By: FPics

FPics — Tue, 13 Mar 2007 23:45:29 +0000

Unfortunately something was missed.
I don’t see an image under
“After Transform”.
Other than that – you have provided very detailed instructions… Thank you.

By: davidvogt

davidvogt — Sun, 04 Feb 2007 00:38:09 +0000

Your article is very informative and helped me further.

Thanks, David

By: Court Kizer

Court Kizer — Wed, 13 Dec 2006 00:21:26 +0000

Just use PHPThumb, it’s excellent, you can use it inline with any image. So for example you can use the IMG tag inline, and add variables such as cropping, watermarks, all sorts of fun features. I use it with my ajax image manipulation. It even can be set to cache thumbnails and images.

Check it out:
http://phpthumb.sourceforge.net/

By: bbuffone

bbuffone — Fri, 01 Dec 2006 12:13:04 +0000

I will be posting on how the back end peice works but here is the code needed

< ?php

//This function create an image from the information supplied to it.

$imageURL = $_GET['imageurl'];

$imageZoom = $_GET['scale'];

// These are the actual pixel values time -1
// or $imageX = $realX * -1.0;
// I should to the multiplication here
// instead of on the client.

$imageX = $_GET['x'];
$imageY = $_GET['y'];

$imageWidth = $_GET['width'];
$imageHeight = $_GET['height'];

$sourceImageType = $_GET['sourcetype'];
$targetImageType = $_GET['imagetype'];

/* Generate a unique token: */
$imageNumber = md5(uniqid(rand(),1));

function thumbnail_jpeg ($original, $thumbnail, $imageX, $imageY, $width, $height, $zoom, $quality) {
list($width_orig, $height_orig) = getimagesize($original);

//get the orginal image.
$image = imagecreatefromjpeg($original);

//create the zoomed image
$zoom_width = $width_orig * ((float)$zoom);
$zoom_height = $height_orig * ((float)$zoom);

$image_zoomed = imagecreatetruecolor($zoom_width, $zoom_height);
imagecopyresampled($image_zoomed, $image, 0, 0, 0, 0,
$zoom_width, $zoom_height, $width_orig, $height_orig);

//create the final image
$image_p = imagecreatetruecolor($width, $height);
imagecopyresampled($image_p, $image_zoomed, 0, 0, $imageX, $imageY, $width, $height,
$width, $height);

imagejpeg($image_p, $thumbnail, $quality);
return;
}

$imageFileName = "imagestore/".$imageNumber.".".$sourceImageType;
thumbnail_jpeg($imageURL, "../".$imageFileName, $imageX, $imageY, $imageWidth, $imageHeight, $imageZoom, 100);
?>
{
imageLocation : “http://www.rockstarapps.com/samples/sendmeapic/< ?php echo $imageFileName ?>”
}

By: Peter

Peter — Fri, 01 Dec 2006 09:00:36 +0000

Great article! How do you pass the cropping/scaling info to the backend so that ImageMagick can do the high quality scaling and cropping?

By: anjan bacchu

anjan bacchu — Fri, 01 Dec 2006 08:21:08 +0000

hi there,

coming from ajaxian. nice tip.

BR,
~A

By: Ajaxian » Send Me a Pic

Ajaxian » Send Me a Pic — Fri, 01 Dec 2006 06:26:27 +0000

[...] Bob has written up a post on Ajax Image Manipulation which is used in Send Me a Pic. [...]