| View previous topic :: View next topic |
| Author |
Message |
amnuts
Site Admin
Joined: 01 Sep 2002
Posts: 662
Location: East Sussex, England
|
 Posted: Wed Mar 16, 2005 9:42 am Post subject: Different cropping interfaces |
 |
|
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! 
Andy |
|
| Back to top |
|
 |
docdlb
Newbie
Joined: 20 Mar 2005
Posts: 1
Location: London, UK
|
| Posted: Sun Mar 20, 2005 10:18 pm Post subject: |
|
|
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 |
|
|
amnuts
Site Admin
Joined: 01 Sep 2002
Posts: 662
Location: East Sussex, England
|
| Posted: Mon Mar 21, 2005 4:08 am Post subject: |
|
|
Hi, and welcome to the board!
Thanks for your kind words - I'm glad you like the scripts.
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  ) Hopefully I'll get around to doing something with it sooner rather than later!
Regards,
Andy |
|
| Back to top |
|
|
CSIfreak
Newbie
Joined: 26 May 2005
Posts: 2
|
| Posted: Thu May 26, 2005 7:39 am Post subject: |
|
|
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 |
|
|
amnuts
Site Admin
Joined: 01 Sep 2002
Posts: 662
Location: East Sussex, England
|
| Posted: Thu May 26, 2005 8:13 am Post subject: |
|
|
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 |
|
|
CSIfreak
Newbie
Joined: 26 May 2005
Posts: 2
|
| Posted: Thu May 26, 2005 10:09 am Post subject: |
|
|
| Quote: | | Or if you could give me a few weeks I'll try to have something done. |
Thank you!  |
|
| Back to top |
|
|
V@no
Light Poster
Joined: 10 Apr 2003
Posts: 30
|
| Posted: Tue Sep 20, 2005 11:59 pm Post subject: |
|
|
| amnuts wrote: | | Or if you could give me a few weeks I'll try to have something done. |
absolutly no preasure!
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 |
|
|
darkisolde
Newbie
Joined: 11 Aug 2005
Posts: 2
|
| Posted: Fri Oct 14, 2005 8:37 am Post subject: |
|
|
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 |
|
|
amnuts
Site Admin
Joined: 01 Sep 2002
Posts: 662
Location: East Sussex, England
|
| Posted: Mon Oct 24, 2005 5:28 am Post subject: |
|
|
| V@no wrote: | | amnuts wrote: | | Or if you could give me a few weeks I'll try to have something done. |
absolutly no preasure! |
 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 |
|
|
amnuts
Site Admin
Joined: 01 Sep 2002
Posts: 662
Location: East Sussex, England
|
| Posted: Mon Oct 24, 2005 5:31 am Post subject: |
|
|
| 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 |
|
|
gio
Newbie
Joined: 27 Oct 2005
Posts: 4
|
| Posted: Wed Nov 23, 2005 10:28 pm Post subject: |
|
|
| 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 |
|
|
gio
Newbie
Joined: 27 Oct 2005
Posts: 4
|
| Posted: Tue Nov 29, 2005 8:56 pm Post subject: |
|
|
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 |
|
|
rost
Newbie
Joined: 12 Jan 2006
Posts: 1
|
| Posted: Thu Jan 12, 2006 11:45 am Post subject: |
|
|
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 |
|
|
Annon
Newbie
Joined: 13 Jul 2006
Posts: 1
|
| Posted: Fri Jul 14, 2006 12:17 pm Post subject: |
|
|
| 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 |
|
|
|
FAQ
Search
Memberlist
Usergroups
Register
Profile
Log in to check your private messages
Log in
