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.


Different cropping interfaces

 
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: Wed Mar 16, 2005 9:42 am    Post subject: Different cropping interfaces Reply with quote

It seems that I keep adding bits to the cropping interface when trying to help people out with their problems, or trying to answer questions, etc., and none of these features have yet made it into the crop canvas interface class itself... Maybe one day I'll get around to that! But for now, I thought it'd be nice to bring the different version together in one list. Maybe this'll spark off a thread of possibble future features?

http://php.amnuts.com/demos/crop-canvas/interactive2/
This version have a fixed cropping size activated by a drop-down list.

http://php.amnuts.com/demos/crop-canvas/interactive2.php
This version has a scalable background image for the crop and outputs the cropping size.

http://php.amnuts.com/demos/crop-canvas/interactive3/
This version has the ability to default the initial position of the cropping box and also uses the latest version of the drag/drop javascript.

http://php.amnuts.com/demos/crop-canvas/interactive4/
This one shades the outside of the cropping area and not the inside and you use grippers to change the size (not the shift/drag technique currently used). This also outputs the cropping size and uses the latest version of the drag/drop javascript.

Oddly enough, when I created the interface I certainly didn't think it'd be as popular as it has become. Just goes to show how wrong you can be! 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
docdlb
Newbie


Joined: 20 Mar 2005
Posts: 1
Location: London, UK

PostPosted: Sun Mar 20, 2005 10:18 pm    Post subject: Reply with quote

Your classes are superb - I have searched long and hard to find a cropping script and I have found none better - Thank you!

I really like the grab handles you have introduced in interactive4 interface. However, I noticed that even if I select proportional resize, this only works when shift-dragging. It is possible to free drag the image out of proportion using the grab handles. Having looked at the code I am not experienced enough to change this, but wondered if you could suggest anything?

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


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

PostPosted: Mon Mar 21, 2005 4:08 am    Post subject: Reply with quote

Hi, and welcome to the board!

Thanks for your kind words - I'm glad you like the scripts. Smile

The interface4 was something I tried as an experiment to work out a few problems that another board member was having, where he had the idea of gripper bars and such. I hadn't completed that all the way and it still has a few issues. But I think any new version will have that style of interface, or perhaps a switch between the two.

But anyway... I haven't had time to work out the kinks yet, like the proportional dragging or the minimum/maximum crop sizes. Off the top of my head I couldn't say what the best method of doing that is, because I'd have to look at the code (which, being monday morning, is not fresh in my mind Wink ) Hopefully I'll get around to doing something with it sooner rather than later!

Regards,

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


Joined: 26 May 2005
Posts: 2

PostPosted: Thu May 26, 2005 7:39 am    Post subject: Reply with quote

Hello Andy,

I have been looking for a tool like this for ages and I finally found it!

Big Big Thank you !!!

The interface4 is just amazing and I apologize for sounding desparate but WHEN will it be available? I'd be more than happy with the code that the demo is running even if it still has issues.

All the best,

Rad
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 May 26, 2005 8:13 am    Post subject: Reply with quote

Hi there, and welcome to the board!

Unfortunately I had to stop developing anything for a while because of vacations, birthdays and just generally not having any time at all. It's funny you should mention number 4 today though because just this morning I thought how nice it would be to kick off development on that one again. Not sure when I'll be able to start up again - it's just a matter of trying to find time!

If you wanted to play around with #4, then I don't think the actual PHP has changed, just the javascript that it outputs. So you could just view the source and try to integrate than into your copy of the class. You'll need the latest version of the drag & drop class from Walter Zorn's site, though. Or if you could give me a few weeks I'll try to have something done.

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


Joined: 26 May 2005
Posts: 2

PostPosted: Thu May 26, 2005 10:09 am    Post subject: Reply with quote

Quote:
Or if you could give me a few weeks I'll try to have something done.


Thank you! Very Happy
Back to top
View user's profile Send private message
V@no
Light Poster


Joined: 10 Apr 2003
Posts: 30

PostPosted: Tue Sep 20, 2005 11:59 pm    Post subject: Reply with quote

amnuts wrote:
Or if you could give me a few weeks I'll try to have something done.
absolutly no preasure! Very Happy

That "#4" interface is amazing! I'm just wonder what else could possible be added? I mean, the only issue I could see is the proportional type doesnt work, the rest is superb.

P.S. where are the coordinates of the selection start counted, from the outside of gripper box's corner or where the line between the gripper box is? its about 4-5 pixels difference...and that makes it show the crop size when select whole images is 485 / 398 while the actual image size is 484 x 395
Back to top
View user's profile Send private message Visit poster's website
darkisolde
Newbie


Joined: 11 Aug 2005
Posts: 2

PostPosted: Fri Oct 14, 2005 8:37 am    Post subject: Reply with quote

Hello,

I agree that #4 grippers is an amazing feature. Would it be possible for me to implement just the grippers part in the existing code I've been using? Or else how would it be possible to add to the cropping area a small image to the corners (an arrow for instance) that would help the users understand they can resize the area with shift+drag?

Thank you again.

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


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

PostPosted: Mon Oct 24, 2005 5:28 am    Post subject: Reply with quote

V@no wrote:
amnuts wrote:
Or if you could give me a few weeks I'll try to have something done.
absolutly no preasure! Very Happy


Laughing It's bloody amazing how much time zooms past me! I really did have every intention of upgrading this script within the two weeks from when I originally posted. But that became four weeks, which became either, and so on... Sheesh!

V@no wrote:
That "#4" interface is amazing! I'm just wonder what else could possible be added? I mean, the only issue I could see is the proportional type doesnt work, the rest is superb.

P.S. where are the coordinates of the selection start counted, from the outside of gripper box's corner or where the line between the gripper box is? its about 4-5 pixels difference...and that makes it show the crop size when select whole images is 485 / 398 while the actual image size is 484 x 395


Yeah, I hadn't really worked too hard on the interface to get everything right. I was really just helping out a user who was changing my interface to do something similar but was having problems. After that I pretty much left it as-is.

Other things I would integrate:

Being able to give dimenions in a textbox, selecting pre-set dimensions from a drop-down list, proportional cropping, feedback on the crop area dinemsions, default a position of the crop area as well as size, and possibly many other things that have been posted up on this board.

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


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

PostPosted: Mon Oct 24, 2005 5:31 am    Post subject: Reply with quote

darkisolde wrote:
I agree that #4 grippers is an amazing feature. Would it be possible for me to implement just the grippers part in the existing code I've been using? Or else how would it be possible to add to the cropping area a small image to the corners (an arrow for instance) that would help the users understand they can resize the area with shift+drag?


You could just copy the javascript in interface #4 and integrate it into your copy of the class. Don't expect everything to work correctly as-is, though! To get images in the grippers, just use CSS and define a background image for each of them, that should work a treat! (and possibly something I might put into the next version..... if I ever get around to doing it!)

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


Joined: 27 Oct 2005
Posts: 4

PostPosted: Wed Nov 23, 2005 10:28 pm    Post subject: Reply with quote

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


Awesome interface.

I've been trying to integrate it with my code and can't seem to get past the following few issues:

1. The 'proportional' (constrained) option doesn't work - checking the button has no effect.. even though the code has:

Code:
if (proportional) {
   dd.elements.theCrop.scalable  = 1;
   dd.elements.theCrop.resizable = 0;


Has anyone managed to get 'proportional' cropping working in this version?


2. I found it tricky to resize the crop area so that the border aligns with the image border - the grippers get in the way. So I modified the 'moveGripsToCorners' function to show the grippers on the inside of the box but the clickable area for them still seems to be outside the box? - where is this defined?


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


Joined: 27 Oct 2005
Posts: 4

PostPosted: Tue Nov 29, 2005 8:56 pm    Post subject: Reply with quote

I'm attempting to adjust the my_DragFunc() in interface4 so that it can crop proportionally (4 w : 3 h in my case)

Here is what I have so far - it partially works:

Code:

   function my_DragFunc()
   {
       crop  = dd.elements.theCrop;
       image = dd.elements.theImage;
   
      if (dd.obj == gbr) {
         if ((gbr.y < (image.h + image.y)) && (gbr.x < ((image.w + image.x) - 2))) {
         
            var newx=gbr.x-gbl.x;
            var newy=Math.round(newx*(3/4.0));
            crop.resizeTo(newx, newy);
            
         }
      } else if (dd.obj == gtr) {
         if ((gtr.y > (image.y - 2)) && (gtr.x < ((image.w + image.x) - 2))) {
         
            var newx=gtr.x - gtl.x;
            var newy=parseInt(newx*(3/4.0));
            crop.moveTo(gtr.x - crop.w + Math.round(gtr.w/2), gtr.y + Math.round(gtr.h/2));
            crop.resizeTo(newx, newy);   
            
         }
      } else if (dd.obj == gbl) {
         if ((gbl.y < (image.h + image.y)) && ((gbl.x + 2) > image.x)) {
            
            var newx=gbr.x - gbl.x;
            var newy=parseInt(newx*(3/4.0));
            crop.moveTo(gbl.x + Math.round(gbl.w/2), gtl.y + Math.round(gtl.h/2));
            crop.resizeTo(newx, newy);
         
         }
      } else if (dd.obj == gtl) {
         if ((gtl.y > (image.y - 2)) && ((gtl.x + 2) > image.x)) {
      
         var newx=gtr.x - gtl.x;
         var newy=parseInt(newx*(3/4.0));
         crop.moveTo(gtl.x + Math.round(gtl.w/2), gtl.y + Math.round(gtl.h/2));
         crop.resizeTo(newx, newy);         
         
         }
      }
      crop.maxoffr = (image.w - crop.w) + 1;
      crop.maxoffb = (image.h - crop.h) + 1;
      
       showCropSize();
      reposBackground();
       moveGripsToCorners();
   }



The issues I'm now stuck on are:

1. it doesn't quite work for the top-right or top-left grippers - when you pull, the box resizes but also moves. I'm sure it's the 'moveTo' function which needs to be updated (to keep it in place) but I'm not sure how...

2. Resizing the box now doesn't seem to pay as much attention to the limits of the image (you can resize the crop box much larger)

Anyone have any ideas on how to solve these issues or ses a better way to implement proportional resizing?
Back to top
View user's profile Send private message
rost
Newbie


Joined: 12 Jan 2006
Posts: 1

PostPosted: Thu Jan 12, 2006 11:45 am    Post subject: Reply with quote

Hey

Solved it for you.

Issue no 1:

Only use the lower right grip. Hide the other ones by removing the background color and the border.

Issue no 2:

See the code below. I used a picture for the lower right grip. The picture is 12x12 pixels.

Use this code for that:

Code:


<div id="gbr" style="visibility:hidden; width: 12px; height: 12px; position: absolute; border:0px solid #fff;"><img src="images/dragcorner.gif" style="height: 12px; width: 12px;"></div>



Below is the my_DragFunc() function. noPixels is the size of the grip picture I'm using above.

Code:

       noPixels = 12;

       function my_DragFunc()
       {
          crop  = dd.elements.theCrop;
          image = dd.elements.theImage;
       
          if (dd.obj == gbr) {
             if (((gbr.y + gbr.h) < (image.h + image.y)) && ((gbr.x + gbr.w) < ((image.w + image.x) - 2))) {
                var newx=gbr.x-gbl.x;
                var newy=Math.round(newx*(<?echo("$this->cropHeight/$this->cropWidth");?>));
                if((newy + crop.y + noPixels) < (image.h + image.y))
                  crop.resizeTo(newx+noPixels, newy+noPixels);
             
             }
          }
          crop.maxoffr = (image.w - crop.w) + 1;
          crop.maxoffb = (image.h - crop.h) + 1;
           
          showCropSize();
          reposBackground();
          moveGripsToCorners();
       }
Back to top
View user's profile Send private message
Annon
Newbie


Joined: 13 Jul 2006
Posts: 1

PostPosted: Fri Jul 14, 2006 12:17 pm    Post subject: Reply with quote

I tried to implement this into the current version of cropcanvas, but I couldn't get it to work right. Does anyone have any information on building it in to the current version?
Back to top
View user's profile Send private message
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