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.


How to use the cropping interface

 
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: Fri Dec 16, 2005 4:24 am    Post subject: How to use the cropping interface Reply with quote

First you need to go to the following address:

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

and downloading the following files:

class.cropcanvas.php
class.cropinterface.php
wz_dragdrop.js
transbg.png
transparentpixel.gif

You don't need the two test files, but they would be handy if you didn't want to type too much.

The most basic setup to get the cropping interface to work is something like this:

PHP:
<?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;
    }

?>

<html>

<head>
    <style type="text/css">
        body, td, p {
            font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
            font-size: 10px;
        }
        
        #submit {
            font-size: 10px;
            font-family: "MS Sans Serif", Geneva, sans-serif;
            height: 23px;
            background-color: #D4D0C8;
            border: 0px;
            padding: 3px,5px,3px,5px;
            width: 100%;
        }
    </style>
</head>
<body>

    <?php

        $ci
->loadInterface('mypicture.jpg');
        
$ci->loadJavaScript();

    
?>

</body>
</html> ?>


(All of which can be found in the test.cropinterface.php file.)

So let's break that down a little bit. You have the main html for your page (and having the cropping interface in the <body> tags is very important for it to work correctly in IE), a block of PHP where you call in the class and see if the interface has been submitted, and a block of PHP to display the interface.

There's no point in explaining the html - if you don't know that then perhaps you shouldn't be doing PHP programming! Wink So the first block of PHP starts off with these lines:

PHP:
<?php

    
require_once 'class.cropinterface.php';
    
$ci =& new cropInterface();

?>


This should be pretty obvious in what it does. You're including the class.cropinterface.php[i] file (which in turn includes the [i]class.cropcanvas.php file) and then instantiating it in a variable called $ci. Obviously you could call that variable whatever you like.

The rest of the first block of PHP looks like this:

PHP:
<?php

    
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;
    }

?>


This is the main processing stage of the cropping class. The loadImage, cropToDimensions and showImage methods all belong the to page class.cropcanvas.php file. When the interface form is submitted, it passes data over a HTTP GET request with a few specific parameters in the query string. Those parameters are file (the file name), sx (start x position of the crop), sy (start y position), ex (end x position), and ey (end y position). You can use them when calling any of the methods in the canvasCrop class (see the class.cropcanvas.php file for more information on what they are). Or, of course, you could write your own functions here to process the image in any which way you want - you don't necessarily have to crop the image! The purpose of the cropping interface is just to provide you with the x,y positions of where the crop should be, and then you to decide what you want to do with that information. The obvious one would be to crop the image, but you could also just store the coordinates in a database or file for later use. (I personally have done that to provide on-the-fly cropping which can be tweaked at any time and never alters the main image.)

In the example above I simply load the image, crop it to the dimensions I set in the interface and then output it directly to the browser. This wouldn't be a practical thing to do under normal circumstances as you would probably want to save the image after it's been cropped and then redirect the user to another page. The forum (http://php.amnuts.com/forums/viewforum.php?f=14) has examples of this if you search.

The final PHP block looks like this:

PHP:
<?php

    $ci
->loadInterface('mypicture.jpg');
    
$ci->loadJavaScript();

?>


The loadInterface method takes one parameter, and that's the name of hte image file you want to load (including its path). So in the example above I am assuming that there is a file called mypicture.jpg in the same directory as the script is running in.

Typically you would have the name of the file passed to the script by some selection process, such as a form with a drop-down list or a clickable list of links. So you may veyr well end up using something like:

PHP:
<?php $ci->loadInterface(IMAGE_ROOT $_GET['image_selection']); ?>


where I have a defined constant with the path to the images and the query string parameter 'image_selection' has just the name of the file I want to load.

The loadJavaScript method must be the last thing to be called on the page. It doesn't need to be directly under the loadInterface method, as you may well have other html for your page under the interface, but it has to be called last. If you don't do this, sometimes IE can not make the interface work correctly.

And there you go... How to use the cropping interface. Enjoy!
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