Thursday, June 4th, 2009
Image thumbnail crop tool with Processing.js and PHP GD
Matt Schoen has written a nice image thumbnail tool that lets you zoom in on the part of the image that you want to crop for a thumbnail.
You can check out the Processing code that does the work:
JAVASCRIPT:
-
-
void setup(){
-
size(600, 600); //for internal size variables
-
frameRate(30); //set our draw rate
-
stroke(0); //all lines will be black
-
color c = color(128,128,128,128);
-
fill(c); //all filled rects will be 50% gray with 50% transparency
-
}
-
-
int xoffset = 0; //temp variable while we're dragging the mouse
-
int yoffset = 0;
-
int xpos = 0; //where to draw the image
-
int ypos = 0;
-
int startx, starty;
-
int prsd = 0;
-
PImage a; // Declare variable "a" of type PImage
-
a = loadImage("img.jpg"); // Load the images into the program
-
double s = 1.0;
-
double r = 1.0;
-
-
void draw(){ //this method is called by processingjs at the above frame rate
-
background(0); //draw a black background
-
//for testing purposes, to figure out the scaling
-
scale(s);
-
image(a, xpos - xoffset, ypos - yoffset); //draw scaled image
-
scale(1/s);
-
//for whatever reason, using "scale(1.0);" didn't reset the scale here. I have no idea why...
-
-
//draw ghosting frame
-
noStroke(); //we don't want borders on these rects
-
rect(0,0,600,100);
-
rect(0,500,600,100);
-
rect(0,100,100,400);
-
rect(500,100,100,400);
-
line(0,560,600,560);
-
-
//draw the "button" regions
-
line(300,560,300,600);
-
line(570, 0, 570, 30);
-
line(570, 30, 600, 30);
-
}
-
void mousePressed(){
-
if(mouseY> 560){
-
if(mouseX> 300){
-
s += .1;
-
}
-
else{
-
s -= .1;
-
}
-
}
-
if(mouseY <30 && mouseX> 570)
-
link("http://www.pagefoundry.net/matt/jquery/renderthumb.php?x=" + xpos + "&y=" + ypos + "&s=" + s);
-
prsd = 1;
-
startx = mouseX;
-
starty = mouseY;
-
}
-
void mouseDragged(){
-
if(prsd> 0){
-
xoffset = startx - mouseX;
-
yoffset = starty - mouseY;
-
}
-
}
-
void mouseReleased(){
-
prsd = 0;
-
xpos -= xoffset;
-
ypos -= yoffset;
-
xoffset = 0;
-
yoffset = 0;
-
}
-
2.5 rating from 33 votes
nice, but is a simple cropper
maybe the new stuff is using the processing library?
in safari is not working….
What about this: Kroppr ?
PS. yes is mine, and yes is paid.
sorry, here is the link again
Kroppr
It`s not work in Opera
kroppr is nice, at least it’s a pleasure to look at the cute koala, instead of the bloody eye.
oops, it’s not a koala, but at least it’s a cute animal, :), instead of a haunting bloody eye, :)
Kroppr is quite good. I was very surprised when it rotated. Image Thumbnail Tool on the other hand…. thumbs down. I don’t see the need for using canvas – I’ve built thumbnail croppers with just JS/CSS.
This is kinda cool for the fact it uses processing.js but I found this other one [I am in no way affiliated with defusion.org.uk]
http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/ and think it deserves a look – couldn’t find it in ajaxian history. At version 1.2.0 (last updated Oct 2006) it’s still very feature rich.
Defusion is trying to raise money to cover time to fix bugs and add features for v2.0.
About the browser compatibility — I used Firefox while I was writing the tool and honestly made no attempt at cross-browser support (maybe I should have called it v0.5 haha). The processing.js website mentioned what is essentially an IE patch, and I’m not sure about what is going on with Opera or (as reported by a friend) Chrome. I’m working on a bunch of other projects but when I get to updating this I’ll look into the compatibility issues (also if anyone out there knows exactly what’s wrong and how to fix it feel free to shoot me an e-mail: matt@pagefoundry.net)
Cross browser jQuery plugin for image cropping: Crop Images with jCrop: Cross-Browser jQuery Pluging for Image Cropping