Prototype/Script.aculo.us Javascript Image Cropper
UPDATE (May/20/2006): Dave Spurr has built a new cropper which includes most of what everybody wanted out of this cropper. His cropper superscedes this one, so check it out here: “http://www.defusion.org.uk/demos/060519/cropper.php”:http://www.defusion.org.uk/demos/060519/cropper.php
For a better part of last night and today I’ve been working on implementing a Javascript image cropper built on “Prototype”:http://prototype.conio.net/ and “Script.aculo.us”:http://script.aculo.us. I’ve got an “initial version posted”:http://encytemedia.com/demo/cropper/ posted for those who’d like to play around with it.
h3. A few features
- Easily initialized with one line of unobtrusive Javascript.
- Draggable Crop Box
- Constrain proportions by holding shift.
- Callbacks pass the coordinates and size of the crop box allowing you to easily use the data in forms or Ajaxed solutions. RMagick anyone?
- Works in Firefox and Safari on the Mac (anyone care to test and report on Windows?)
- Ability to style cropbox as you please.
- Built on Prototype and Script.aculo.us.
- Sweeter than a bowl of “Kayro Syrup”:http://www.karosyrup.com/index.htm sprinkled with sugar.
h3. A few known bugs
- Ability to drag crop box off of picture.
- Can’t draw NorthWest.
- Cropbox will go slightly outside the bounds of the image.
I’m working on getting the remaining bugs fixed and adding some polish. I’ve talked with “Thomas Fuchs”:http://mir.aculo.us/ and this will be included in the “Script.aculo.us”:http://script.aculo.us library when it’s ready!
Sorry, comments are closed for this article.
Justin develops iPhone and Mac software over at Labrat Revenge by night and by day he is the Design Director for entp, the company behind Lighthouse, Warehouse, and Mephisto. You can check out his dated portfolio for a peek of what he's done.
-
Beautifully simple issue tracking and project management. With a beautiful Mac-like interface, email and subversion integration, Lighthouse is the perfect project management tool. We took the suck out of issue tracking.
-
Jan12
YouTube has just announced HouseHub and Senate Hub.
permalink -
Oct10
Best Practices For Cocoa and CocoaTouch—Invaluable tips from Cocoa developers.
permalink -
Sep25
Track House And Senate Votes On Twitter. I’ve put together a small script that parses vote data collected by Govtrack.us and posts to twitter.
permalink -
Jul28permalink
Protip: Color grep searches in terminal
alias grep='GREP_COLOR="1;37;41" LANG=C grep --color=auto'Stash this away in your Z Shell (~/.zshenv) or Bash environment (~/.bashrc) and set your preferred ANSI code.
-
Jun08
ActiveRecord Ported To Objective-C brought to us by Ninja Kitten
permalink -
May06
With the release of Opera’s DragonFly, IE 8’s Developer tools, Safari’s/Webkit’s Web Inspector and Drosera; and the Grand Daddy of them all, Firebug – we’ve now come full circle.
permalink -
Feb08permalink
DoubleClick and Define using Apple Dictionary
var selection; if(window.getSelection) selection = window.getSelection(); else if(document.selection) selection = document.selection.createRange(); document.observe("dblclick", function() { if(navigator.userAgent.include("Macintosh")) { location.href = "dict://" + selection; } });A quick (and probably dirty) Prototype-based hack allowing Mac users to get the definition of any word by double clicking it.
-
Feb08permalink
Object.extend(Date.prototype, { strftime: function(format) { var day = this.getUTCDay(), month = this.getUTCMonth(); var hours = this.getUTCHours(), minutes = this.getUTCMinutes(); function pad(num) { return num.toPaddedString(2); }; return format.gsub(/\%([aAbBcdDHiImMpSwyY])/, function(part) { switch(part[1]) { case 'a': return $w("Sun Mon Tue Wed Thu Fri Sat")[day]; break; case 'A': return $w("Sunday Monday Tuesday Wednesday Thursday Friday Saturday")[day]; break; case 'b': return $w("Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec")[month]; break; case 'B': return $w("January February March April May June July August September October November December")[month]; break; case 'c': return this.toString(); break; case 'd': return this.getUTCDate(); break; case 'D': return pad(this.getUTCDate()); break; case 'H': return pad(hours); break; case 'i': return (hours === 12 || hours === 0) ? 12 : (hours + 12) % 12; break; case 'I': return pad((hours === 12 || hours === 0) ? 12 : (hours + 12) % 12); break; case 'm': return pad(month + 1); break; case 'M': return pad(minutes); break; case 'p': return hours > 11 ? 'PM' : 'AM'; break; case 'S': return pad(this.getUTCSeconds()); break; case 'w': return day; break; case 'y': return pad(this.getUTCFullYear() % 100); break; case 'Y': return this.getUTCFullYear().toString(); break; } }.bind(this)); } });UPDATE: Bugs fixed. Thanks Andrew and Stephen
Also, some of my old and new code has been posted on GitHub. You might find something useful.
-
Feb04
A beautiful, organic animation by Flight404 created using Processing.
-
Jan08
Aaron Patterson shows us how to define ruby methods which can be called from JavaScript using RKelly.
permalink -
Jan07
Dustin might not surprise you at your house with a book in hand, but he’ll damn sure send you his innermost fu in the form of a shiny yellow and black book. It’s an excellent read if you’re looking to put more funk in your functions and class in your classes. Check out “Pro JavaScript Design Patterns” by Dustin and Ross Harmes.
—I’m Justin Palmer and I approve this message.
permalink -
Dec23
IE 8 PAsses the Acid 2 Test for those not keeping tabs on things.
permalink -
Oct24
Mislav has written up an excellent overview on upgrading Radiant (which used 1.5) to Prototype 1.6. The article does a great job of showing how 1.6 is superior to 1.5.
permalink -
Oct19
According to the New York Times, the Daily Show Archives, with over 7,000 videos are online—free and searchable.
permalink -
Oct11
Copyright © 2005-2009 Justin Palmer | Powered by Mephisto
Discussion
Looks great, can’t wait to see the finished version!
That’s very cool, I was looking into doing something like this recently but got bogged down because I thought I’d need to use Flash.
The exact functionality I was going to build was when you had a set size/proportion and you zoom and drag the image behind a fixed viewfinder.
For reference see the buddy image cropper in iChat or this flash implementation: http://dev.worldoptimizer.com/flashcropsave/interface.swf
and some variations: http://flashrocket.worldoptimizer.com/article/12/flash-based-cropping-tool
How do-able would something like that be?
Nice!
very nice work :o)
dave: Nice examples! Something like that would involve using CSS’s clip property which is still kinda shaky and would also require rewriting most of the script. Just not something I’m up to at the moment.
That’s insane, nice work man.
Nice!
but it doesnt work in IE on windows (like many things)
Justin, thats a question I asked in my blog entry. If any of you guys are running Windows and can test in IE and FF that would be might square of you. ;-)
Cool. A couple items for a wish list.
Need to darken the croped area not lightenthe area to keep.
Need to be able to resize crop box after its been created.
the fist one is done on the demo at http://www.speedingrhino.com/cropper.htm
I actualy remember seeing a demo somplace where someone had both of those working, and it was very cool.. I have been trying for 2 hours now to find it but no love… Any how, it will be nice to have this working using Scriptaculous.. I am uing that alread in some of my other code…
Nice Ajax implimentationon these coments!! That was so cool I have to add anouther!!!
In the IE/Win default drag behaviour on image block your functional.
http://www.speedingrhino.com/cropper.htm
oops, never mind, didn’t read the followups
check this one out too http://ditchnet.org/dhtmlgallery/crop.html
Testing, sorry ;)
very well, can you save the picture . If you want i can test it on lot of windows version and browser …
go to my site for contact : www.pixeldargent.com
it would be nice if you could send a ratio for the resize box to be into it. forinstance if you had to create images a certain dimenions then you send in the dimensions, then the user can resize the box (keeping ratio) then export to a ressize.
nice, but it doesnt work in IE/Windows
and it works in FF/Windows
Nice, good luck in fixing those bugs. Hope somebody could also come up with an IE port of this useful tool. Keep it up, man! :)
Hi, I “solved” the IE problem.
The problem is that IE lets the mousedown-event go through the canvas down to the original image. Seems like a browser bug to me…
During my testing of the problem I found that this solves the problem:
this.canvas.style.background = “blue”; Element.setOpacity( this.canvas, 0 );
Add that last in initCanvas. The color has no meaning, but there has to be something in the background. Then set the opacity to 0 to nullify the effect of the bg-color.
I’ll be glad to see this in the scriptaculous library later.
I think this thing is great. The IE hack helped a ton.
I’m trying now to figure out how to use this on an image that’s centered on the page and I’m having a horrible time with it.
It took me a few hours, but I think I figured it out. When I centered the image using CSS, the initial point would be recorded wrong. I traced it down to the setting of the initialHandleCoords in the onDrag method. When the initialHandleCoords are set, it is using something like this:
x: Event.pointerX(event) – this.picContainerOffsets.left
I noticed that when I dragged the mouse, however, the cursor and the corner of the drag box matched up. After much looking, I figured out that it is because when dragged, the offset is found in a different way. Rather than using the picContainerOffsets variable, it is set like this:
var currentX = Event.pointerX(event) – this.picContainer.offsetLeft
The picContainerOffsets are set using in the initialize method using prototype’s Position.positionedOffsets. I’m not sure why these were used rather than the picContainer.offsetLeft calls that are used later.
Does work in IE
I found a simple solution for fixing the box so it can’t be put outside the image when dragging. I’ve tested it in FF on a PC and with the fix above from Glenn Nilsson tested it in IE on a PC. There are still a few minor issues with it working in IE. If you’re still working on this and interested I can continue to do testing.
For thi fix add this directly after the height, width, top and left get set in cropComplete:
if (left + width > this.picture.width) { this.handle.style.left = (this.picture.width - width) + "px"; } if (top + height > this.picture.height) { this.handle.style.top = (this.picture.height - height) + "px"; } if (top < 0) { this.handle.style.top = "0px"; } if (left < 0) { this.handle.style.left = "0px"; } var top = this.handle.offsetTop; var left = this.handle.offsetLeft;...any progress on this?
Just a quick note to thank Justin for linking through to my cropper project which is based on Prototype and script.aculo.us.
As he says it covers most of the features requested in these comments, which include (to name a few):See the demo page and the cropper project page for more details, and thanks again to Justin for the link.