Awesome image cropper/thumbnail maker script – Modified Marquee Tool

As I'm recoding my portfolio right now, I thought to myself – how great would it be to have a thumbnail maker tool. Some PHP or Javascript solution to crop images dynamically without the use of Photoshop. I would hate to fire up Photoshop every time I want to upload something. I'm sure you've all been there before. Anyways I landed upon a script that suited my need exactly. The Rectangle Marquee Tool. The tool looks great but was a bit confusing for me to get working and based on the comment for a few others too. Now I've also done some slight PHP modification to get the script working to my needs and generating the correct thumbnails.

See what I'm mumbling on about right here:
Demonstration of Marquee Tool

Once again I'd like to clarify that I did not make the Rectangular Marquee Tool, it was written by Sergey Koksharov using certain functions of the Prototype/Scriptaculous framework. I'm merely just doing some tweaks to make it work better in my circumstance. So all credits goes to Sergey and the Scriptaculous team.

My modification will allow you to do certain things such as:

Define a input image dynamically
Define the output image dynamically
Generate a final output image

I believe the PHP included in the original script was a bit dated so it wasn't working on my machine and servers that's why I made my own version.

So to start off you need to download the required files from: here. Then you need to extract the files into a scripts folder or whichever you prefer just remember to rename the source path after. The real files you need are:

marker.css
prototype_reduced.js
rectmarquee.js

Once you've got the files extract them to the proper folders and create fresh PHP file to work with. This is the file your script will run from. I'll break down my code into chunks for you to understand, but I'll go in order so if you copy each chunk and paste them in the same order it should work. That is if you're reading this instruction right ;)

Before the HTML

So this piece of code starts off your whole document even before the HTML code. There's only two codes you need to modify which is the $img_src (original file) and $img_dst (final thumbnail file).

<?php

//Source Image to Crop From
$img_src = 'img/';

//Thumbnail Location
$img_dst = 'img/';

//If you want to feed this dynamically you can use
//$_GET tags or draw them in through a database

//Some coding here not just for looks.
if ($img_src!=") {
//Check if Image
//Image Dimension
if (!getimagesize($img_src)) {
//Not A Valid Image
$img_error = 1;
} else {
//Getting Image Dimension
$img_dim = getimagesize($img_src);
}

//Verfiy This Is An Image
$img_verify = @imagecreatefromjpeg($img_src);

if (!$img_verify) {
$img_error = 1;
} else {
//Getting Dimensions
$img_w = imagesx($img_verify);
$img_h = imagesy($img_verify);
}

if ($img_error == 1) {
echo 'Not a valid image';
exit;
}
}

The HTML and HEAD Tags

This is the code to begin your HTML tag and your chunk of HEAD tag. Note that if you didn't place your files in the same location you have to change the source path.

</head>

Your BODY and Closing HTML Tag

So all that's left is the BODY tag. There's really no modification you need to do here except for the (don't paste this in your code in order):

coords: {x1: 0, y1: 0, width: 100, height: 50}

This line defines where the crop box starts and how big it should be. You can play around with it if you want. Anyways here's the coding (do paste this in).

<body>

function onMarqueeUpdate() {
var coords = MarqueeTool.getCoords();

$('coord_x').value = coords.x1;
$('coord_y').value = coords.y1;
$('coord_w').value = coords.width;
$('coord_h').value = coords.height;
}

function onWindowLoad() {

MarqueeTool = new Marquee('sampleid', {
preview: 'preview',
color: '#000',
opacity: 0.45,
coords: {x1: 0, y1: 0, width: 100, height: 50}
});

MarqueeTool.setOnUpdateCallback(onMarqueeUpdate);

}

Event.observe(window, 'load', onWindowLoad);

</script>

<div style="width: <?php echo $img_w; ?>; height: <?php echo $img_h; ?>; position: relative;">
<img src="<?php echo $img_src; ?>" alt="" id="sampleid" />

<div id="preview" style="position: absolute; right: 10px; bottom: 10px; border: 2px solid #FFF;"></div>
</div>

</body>
</html>

Now we're just about complete here. All this tool does right now is let you select an area to crop. To actually make the thumbnail you need the assistant of PHP (you can do it in JS but I prefer PHP). You need to have the GD library enabled in order for this to work.

At this point you need to create your last file which is named crop.php. All you need in crop.php is this:

<?php

//Variables
$img_w = $_GET['w'];
$img_h = $_GET['h'];
$img_x = $_GET['x'];
$img_y = $_GET['y'];
$img_src = $_GET['img'];
$img_dst = $_GET['img_dst'];

//There's a Set Thumb
if ($img_w>0 && $img_h>0) {

//Create New Image
$new_img = imagecreatetruecolor($img_w, $img_h);

//Loading The Original Image
$old_img = imagecreatefromjpeg($img_src);

//Copying Image
imagecopy($new_img, $old_img, 0, 0, $img_x, $img_y, $img_w, $img_h);

header("Content-Type: image/jpeg");

@imagejpeg($new_img, $img_dst);
imagejpeg($new_img);

//Destroy the Old Images
imagedestroy($old_img);
imagedestroy($new_img);
}

That's it, and everything should work like planed. I've tested this script out a few times but if anything doesn't work just let me know.

Share It

Tags: PHP Scripts, Portfolio, Thumbnail

This entry was posted on Tuesday, February 23rd, 2010 at 5:59 pm and is filed under Javascript, PHP. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.