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.


Set crop area to ratio

 
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
MrChuck
Newbie


Joined: 30 Mar 2004
Posts: 2

PostPosted: Tue Mar 30, 2004 10:18 pm    Post subject: Set crop area to ratio Reply with quote

After tweaking some stuff to make the functions work with GD 1.62 I got the cropping function to work and it is great!

I figured out how to crop to a ratio and fixed dimensions, etc but what I need to figure out how to do is use the interface so that I can keep the crop area within a certain ratio.

I will be using it to crop for prints like 5x7 and 8x10. I want the user to be able to expand and contract the crop area, but keep the ratio so when it is printed it will be the right ratio.

Not sure where to start.
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 Mar 31, 2004 2:37 am    Post subject: Re: Set crop area to ratio Reply with quote

Hi MrChuck, and welcome to the board.

MrChuck wrote:
After tweaking some stuff to make the functions work with GD 1.62 I got the cropping function to work and it is great!


You had to make tweaks? The class is already set up to auto-detect GD 1.x. The only thing you should need to tweak, if anything, is this line inthe class constructor:

Code:
$this->_gdVersion = (function_exists('imagecreatetruecolor')) ? 2 : 1;


to be this:

Code:
$this->_gdVersion = $this->_getGDVersion();


(It seems some people have issues with the function_exists and the imagecreatetruecolor function.)

MrChuck wrote:
I will be using it to crop for prints like 5x7 and 8x10. I want the user to be able to expand and contract the crop area, but keep the ratio so when it is printed it will be the right ratio.


It just so happens that someone else on this board had the same request, and I am updating the class to add this functionality. However, as it might be a week or two before I get that out, this is what I did:

The original request was to not allow for un-proportional resizing, but instead give fixed dimensions (in a drop-down list) and then resize proportionaly to that.

You can see the finished result at http://php.amnuts.com/demos/crop-canvas/interactive2/.

View the page source and you will notice the drop-down box and the new javascript function called 'my_setSize'. This is all hand coded in there for now, but the update the class will allow people to supply a 'resize to' list, such as:

$ci->setResizeList(array(
array('Set to 400 by 32', 400, 32),
array('4:1 ratio', 40, 10),
array('blah', 100, 100)
);

where the first element is the title for the drop-down list and the other two are width and height, respectively.

But for now that demo should get you on your way to getting your desired results. All you need to do is determine the image size and work out your aspect ratio sizes from there and dynamically build the my_setSize function and the dorp-down list.

You should also note that in the demo I have turned off resizing (which just removes the option for the resizing between standard and proportional) by using the setResizing function after I created the class object, and have set the default resizing type to be proportional by using these two lines:

Code:
    dd.elements.theCrop.scalable  = 1;
    dd.elements.theCrop.resizable = 0;


in the javascript output.

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


Joined: 30 Mar 2004
Posts: 2

PostPosted: Wed Mar 31, 2004 9:47 pm    Post subject: Reply with quote

That is exactly what I was looking for.

In an attempt to find a different solution, I wrote a php script last night to create a new image in the proportion I needed and then add in the image so it cropped to the right size.

This is much better.

Not sure why I had to tweak, but I commented out the GD 2 stuff and it started working.
Back to top
View user's profile Send private message
EssEt
Newbie


Joined: 21 Dec 2004
Posts: 12

PostPosted: Fri Mar 11, 2005 11:14 am    Post subject: hi Reply with quote

i dont get it ... how do i get it like your demo here... i would love to tweak my script so a set of areas can be choosed... and no resize, only scaleble!
can you post a step by step how to do... because i have tried the arrays and cant get it to work.. is it something more to add or remove...
Thats all from me // EssEt
Thanx for a great script by the way!
Back to top
View user's profile Send private message Send e-mail
amnuts
Site Admin


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

PostPosted: Wed Mar 16, 2005 10:08 am    Post subject: Reply with quote

Basically, EssEt, it's all there for you in the above example - you just have to piece it together. But basically what you want to do is this:

Add a drop-down list to the interface with your options. This can be hard-coded with just an echo statement, or you could create a method which takes each resize option.

An example of hard-coding:

PHP:
<?php echo '<select id="setSize" name="setSize" onchange="my_setSize();"><option value="0">Select a cropping size</option><option value="1">50x50</option><option value="2">50x100</option><option value="3">75x200</option></select>'?>


An example of a method:

PHP:
<?php // assume $size is <value>x</value>, such as 50x100
function setCropSizeList($size$description)
{
    
$this->_cropSizes[] = array(explode('x'$size), $description);
?>


And then to output the list:

PHP:
<?php echo '<select id="setSize" name="setSize" onchange="my_setSize();"><option value="-1">Select a cropping size</option>';
foreach (
$this->_cropSizes as $key => $size) {
    echo 
'<option value="'$key'">'$size[1], '</option>';
}
echo 
'</select>'?>


Then you want to add a new javascript function to the loadJavascript method which would be, in this example, called my_setSize. This would take the option value as a parameter and move the cropping area accordingly.

An example of this just statically written would be:

PHP:
<?php function my_setSize()
{
    
element document.getElementById('setSize');
    if (
element.value 0)
    {
        
dd.elements.theCrop.moveTo(dd.elements.theImage.xdd.elements.theImage.y);
        switch(
element.value)
        {
            case 
'1':
                
dd.elements.theCrop.resizeTo(5050);
                
dd.elements.theCrop.defw 50;
                
dd.elements.theCrop.defh 50;
                break;
            case 
'2':
                
dd.elements.theCrop.resizeTo(50100);
                
dd.elements.theCrop.defw 50;
                
dd.elements.theCrop.defh 100;
                break;
            case 
'3':
                
dd.elements.theCrop.resizeTo(20075);
                
dd.elements.theCrop.defw 200;
                
dd.elements.theCrop.defh 75;
                break;
        }
    }
?>


The dynamic version would just use the array created above to list out the case statements... The important part being:

PHP:
<?php foreach ($this->_cropSizes as $key => $size) {
    echo 
"case '$key':\n";
    echo 
"dd.elements.theCrop.resizeTo({$size[0][0]}{$size[0][1]});\n";
    echo 
"dd.elements.theCrop.defw = {$size[0][0]};\n";
    echo 
"dd.elements.theCrop.defh = {$size[0][1]};\n";
    echo 
"break;\n";
?>


And don't forget to default resizing to be off!

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