andy's php projects
 FAQFAQ   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister   ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
Script and site usage:
All of the scripts on this site are provided free for non-commerical, personal or non-profit use. If you find these scripts useful to you, appreciate the free support, or are just an all round nice person, then why not donate a little dosh? If you wish to use any of these in a commercial system, please refer to the payment plan.


Interactive Cropping Tool released

 
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    php.amnuts.com Forum Index -> Crop Canvas
View previous topic :: View next topic  
Author Message
amnuts
Site Admin


Joined: 01 Sep 2002
Posts: 662
Location: East Sussex, England

PostPosted: Mon Dec 01, 2003 4:49 pm    Post subject: Interactive Cropping Tool released Reply with quote

Hi,

I have just posted up the first version of the interactive cropping tool that was mentioned in other threads on this board. What this does is provide you with an easy, pain-free way to display an image, have a user drag around the cropping area, resizing it if they want to (or you let them) and then clicking on a button to crop the image to those dimensions. And the best bit is; because this new tool is an extension of the original Crop Canvas class, you have all the functions to save or view the resulting crop!

An example use of this tool is:

PHP:
<?php

  
require_once 'class.cropinterface.php';
  
$ci = new cropInterface();
  if (
$_GET['file']) {
    
$ci->loadImage($_GET['file']);
    
$ci->cropToDimensions($_GET['sx'], $_GET['sy'], $_GET['ex'], $_GET['ey']);
    
header('Content-type: image/jpeg');
    
$ci->showImage('jpg'100);
    exit;
  } else {
    
$ci->loadInterface('myfile.jpg');
    
$ci->loadJavaScript();
  }

?>


Very simple!

The functions in the class are:

cropInterface($debug = false)
This is the class initiater. You can set debugging on or off by passing true or false.

setResizing($do = true)
With this function you can set the ability to resizing the cropping area on or off by passing true or false.

setCropDefaultSize($w, $h)
This sets the default size of the cropping area to the width and height you pass to the parameter. If this is not explicitly called, then the cropping area default size will be a fifth of the image size.

setCropMinSize($w = 25, $h = 25)
Sets the smallest size that the cropping area will resize to (if you allow resizing).

loadInterface($filename)
This loads the interface using the image located at the path you supply to the function.

loadJavaScript(void)
This includes all the extra javascript required to make the interface work correctly. This must be called at the end of your html - the last thing before the closing <body> tag!

The demo of this interface can be found at:

http://php.amnuts.com/demos/crop-canvas/

All the new files can be found in the Crop Canvas project area:

http://php.amnuts.com/index.php?do=view&id=12

If you find any problems with this interface, have any comments, suggestions, etc., then please post up and let me know.

Free for non-commerical/personal use (of course... If you want to donate anything then I wont say no Wink ). If anyone should happen to want to use it commerically, then let me know and we can arrange something.

Andy


Last edited by amnuts on Tue Oct 10, 2006 4:59 am; edited 1 time in total
Back to top
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger MSN Messenger
sderuiter
Newbie


Joined: 26 Nov 2003
Posts: 9

PostPosted: Wed Dec 03, 2003 2:21 am    Post subject: Reply with quote

Hi!

Looks super, this new class, nice work. I;m going to integrate this into my thumbnailingsystem. I have 2 questions, though:

1: the setDefaultCropSize doesn't seem to work on my side. The cropsize remains the same, no matter what.

2: On my specific setup, I want the user (aka me) to choose a .jpg file of 1600x1200, straight from the camera. This image needs to be rezized to 400x300 and saved as xxx1.jpg. This xxx1.jpg is the input for the cropinterface, which will save the crop as tn_xxx1.jpg.
My question is: do I also need the class.dropshadowthumbnail.php for its rezize capabilities, or can I achieve everything above only with the class.cropinterface.php / class.cropcanvas.php?

regards,
sderuiter
Back to top
View user's profile Send private message
amnuts
Site Admin


Joined: 01 Sep 2002
Posts: 662
Location: East Sussex, England

PostPosted: Wed Dec 03, 2003 4:09 am    Post subject: Reply with quote

sderuiter wrote:
1: the setDefaultCropSize doesn't seem to work on my side. The cropsize remains the same, no matter what.


You are calling this before the loadInterface() call, right? If you want, post up your snippet of code that shows how you initiate the class and interface (you can leave out all the html and such that you might have in the middle of it), and we can take a look at it.

sderuiter wrote:
2: On my specific setup, I want the user (aka me) to choose a .jpg file of 1600x1200, straight from the camera. This image needs to be rezized to 400x300 and saved as xxx1.jpg. This xxx1.jpg is the input for the cropinterface, which will save the crop as tn_xxx1.jpg.
My question is: do I also need the class.dropshadowthumbnail.php for its rezize capabilities, or can I achieve everything above only with the class.cropinterface.php / class.cropcanvas.php?


To go from 1600x1200 to 400x300 is directly proportional. If you want to create a thumbnail then you will probably want to use the dropshadow/thumbnail class (you can use it just to resize - no dropshadow needed!) Because the size is directly proportional, no cropping will need to take place.

Let me just explain the difference, just to be clear.

Cropping will take you original image and remove whatever is outside of the cropping area. No shrinking or resizing of any kind takes place. The image is left as-is, but has bits 'cut off' to make it the size of the crop.

Thumbnailing will keep everything in the image, but make the image the same size as the dimensions you require (be them proportional or otherwise). Nothing from the image is taken away, it's just that as a whole the image is smaller (or larger) than you originally had it.

Obviously, the cropping class will do the former and the dropshadow/thumbnail class will do the latter.

If you need the power of being able to resize images in a variety of ways, then I would suggest you use the dropshadow/thumbnail class. If you just want really simple resizing (based on the image width) but still want to crop in some way (for example, you are shrinking to 400x300, but really want your image to be 300x300) then you might want to look into integrating the function/class as supplied by 'db'.

If any of this is confusing, just let me know!

Andy
Back to top
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger MSN Messenger
sderuiter
Newbie


Joined: 26 Nov 2003
Posts: 9

PostPosted: Wed Dec 03, 2003 4:00 pm    Post subject: Reply with quote

Back to top
View user's profile Send private message
amnuts
Site Admin


Joined: 01 Sep 2002
Posts: 662
Location: East Sussex, England

PostPosted: Wed Dec 03, 2003 5:30 pm    Post subject: Reply with quote

Okay, I'm not going to be able to full answer this (because I have to pack for a vacation I leave for tomorrow - I'm away for 2 weeks), but some things to think about...

1. Does MYIE2 kick back any javascript errors?

2. Do you have this interface within html/body tags?

3. Have you tried using the exact demo from the website? If so, try removing the '$ci->setResizing(false);' and if that doesn't work try removing the '$ci->setCropDefaultSize(200, 80);'.

Sorry I cannot answer more fully right now.

See you in a couple weeks! Smile

Andy
Back to top
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger MSN Messenger
sderuiter
Newbie


Joined: 26 Nov 2003
Posts: 9

PostPosted: Thu Dec 04, 2003 3:28 am    Post subject: Reply with quote

It works! Laughing Thank you very much for all your help and this awesome code!
Enjoy your holiday.

Kind regards,

sderuiter
Back to top
View user's profile Send private message
sderuiter
Newbie


Joined: 26 Nov 2003
Posts: 9

PostPosted: Sat Dec 20, 2003 9:34 am    Post subject: Reply with quote

Hi,

Thank you for your assistance and scripts. The result can be viewed at
http://www.16april1973.nl/reza/

Enjoy the festive season!

Greetings,

sderuiter
Back to top
View user's profile Send private message
amnuts
Site Admin


Joined: 01 Sep 2002
Posts: 662
Location: East Sussex, England

PostPosted: Thu Jan 08, 2004 10:57 am    Post subject: Reply with quote

Very cool - your dogs are so cute!!

Some favs are:

http://www.16april1973.nl/reza/?day=20031203
http://www.16april1973.nl/reza/?day=20031231
http://www.16april1973.nl/reza/?day=20040106 (<-- the dog's so happy!)

Good work! If anyone else wants to post up examples of where they've used the script, then feel free!

Hope you all have a wonderful new year!

Andy
Back to top
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger MSN Messenger
mkuplens
Newbie


Joined: 14 Mar 2004
Posts: 3

PostPosted: Sun Mar 14, 2004 5:58 pm    Post subject: Just a follow-up Reply with quote

The 2nd example code works flawlessly when inserted between <body></body> in your html file.

Just in case anyone was wondering Smile
Back to top
View user's profile Send private message
sudhi
Newbie


Joined: 25 May 2004
Posts: 1
Location: seoul, korea

PostPosted: Tue May 25, 2004 5:07 am    Post subject: Its awesome Reply with quote

First of all,
I would like to say thanks for providing an awesome script.

I am just wondering can we make a solution a complete web image editor using javascript and php with GD .

I mean it could be like paint brush kind solution..with inserting texts, lines, rectangles, with color selection on an image.

great to see u all here...
Back to top
View user's profile Send private message Yahoo Messenger MSN Messenger
amnuts
Site Admin


Joined: 01 Sep 2002
Posts: 662
Location: East Sussex, England

PostPosted: Tue May 25, 2004 7:11 am    Post subject: Reply with quote

Hi sudhi, and welcome to the board!

I imagine it would be possible, though it may get complex very quickly. If you wanted to build a nice interface for something like that, perhaps flash would be a better option? You could still use PHP/GD to generate the final image, but use Flash to give the user the tools and then output what needs doing to the PHP script.

Andy
Back to top
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger MSN Messenger
Display posts from previous:   
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    php.amnuts.com Forum Index -> Crop Canvas All times are GMT - 5 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group