Thursday, June 4th, 2009

Image thumbnail crop tool with Processing.js and PHP GD

Category: Examples

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

  1. void setup(){
  2.     size(600, 600); //for internal size variables
  3.     frameRate(30);  //set our draw rate
  4.     stroke(0);      //all lines will be black
  5.     color c = color(128,128,128,128);
  6.     fill(c);        //all filled rects will be 50% gray with 50% transparency
  7. }
  8.  
  9. int xoffset = 0;    //temp variable while we're dragging the mouse
  10. int yoffset = 0;
  11. int xpos = 0;       //where to draw the image
  12. int ypos = 0;
  13. int startx, starty;
  14. int prsd = 0;
  15. PImage a;  // Declare variable "a" of type PImage  
  16. a = loadImage("img.jpg"); // Load the images into the program
  17. double s = 1.0;
  18. double r = 1.0;
  19.  
  20. void draw(){    //this method is called by processingjs at the above frame rate
  21.     background(0);  //draw a black background
  22.         //for testing purposes, to figure out the scaling
  23.     scale(s);
  24.     image(a, xpos - xoffset, ypos - yoffset);   //draw scaled image
  25.     scale(1/s);
  26.     //for whatever reason, using "scale(1.0);" didn't reset the scale here.  I have no idea why...
  27.    
  28.     //draw ghosting frame
  29.     noStroke(); //we don't want borders on these rects
  30.     rect(0,0,600,100);
  31.     rect(0,500,600,100);
  32.     rect(0,100,100,400);
  33.     rect(500,100,100,400);
  34.     line(0,560,600,560);
  35.    
  36.     //draw the "button" regions
  37.     line(300,560,300,600);
  38.     line(570, 0, 570, 30);
  39.     line(570, 30, 600, 30);
  40. }
  41. void mousePressed(){
  42.     if(mouseY > 560){
  43.         if(mouseX > 300){
  44.             s += .1;
  45.         }
  46.         else{
  47.              s -= .1;
  48.         }
  49.     }
  50.     if(mouseY < 30 && mouseX > 570)
  51.         link("http://www.pagefoundry.net/matt/jquery/renderthumb.php?x=" + xpos + "&y=" + ypos + "&s=" + s);
  52.     prsd = 1;
  53.     startx = mouseX;
  54.     starty = mouseY;
  55. }
  56. void mouseDragged(){
  57.     if(prsd > 0){
  58.     xoffset = startx - mouseX;
  59.     yoffset = starty - mouseY;
  60.     }
  61. }
  62. void mouseReleased(){
  63.     prsd = 0;
  64.     xpos -= xoffset;
  65.     ypos -= yoffset;
  66.     xoffset = 0;
  67.     yoffset = 0;   
  68. }

Posted by Dion Almaer at 7:08 am
6 Comments

++---
2.5 rating from 42 votes

6 Comments »

Comments feed TrackBack URI

It`s not work in Opera

Comment by morman — June 4, 2009

kroppr is nice, at least it’s a pleasure to look at the cute koala, instead of the bloody eye.

Comment by syang — June 4, 2009

oops, it’s not a koala, but at least it’s a cute animal, :), instead of a haunting bloody eye, :)

Comment by syang — June 4, 2009

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.

Comment by AnM8tR — June 4, 2009

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.

Comment by agrath — June 4, 2009

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)

Comment by mschoen — June 5, 2009

Leave a comment

You must be logged in to post a comment.