jCrop is a fantastic jQuery plugin that allows your users to easily crop their photos to the exact dimensions that they choose. Setting up such a system is easier than you might think. Brenley will show us how!
Runner-Up: Brenley Dueck
- Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Gareth February 9th
Great screencast!If this is an example of the quailty of screencasts to follow I am very excited!
( )insic February 9th
as expected. this tutorial is awesome.
( )Patrik February 9th
Broken link on the “Demo”.
( )Javiro February 9th
It’s nice. It’s similar to MCImageManager of TinyMCE
( )Miles Johnson February 9th
I use this plugin and I hae to say it is the most handy and easist plugin to install. I have it flawlessly working with Amazon S3.
( )Webdesign Groningen February 9th
Nice tutorial, this could be of great use for my cms.
( )Saurabh Shah February 9th
nice tutorial…
( )Andrew Turner February 9th
Great Screencast, Nice Work on It. A deserving runner up
One thing for Jeff or another of the NetTuts team, the demo for this isn’t working.
( )DKumar M. February 9th
Nice info Brenley… Thanks for sharing !!
( )M.A.Yoosuf February 9th
great stuff, more and more jQuery pls
( )John February 9th
seems like the source-code belongs to an other tut. could you fix it, please?
( )Ahmet Alp Balkan February 9th
“demo” link is broken please check.
( )Sanne February 9th
Great tutorial!
( )Definitely gonna use this in my new project
Devin February 9th
Very nice tutorial!
( )Muneef February 9th
Nice tut
( )btw has any one used Aptana IDE ?, just curious
Texo February 9th
Please fix demo link
( )rachid February 9th
Nice tuts !!
( )Kristien February 9th
I get this error when I try and view the live demo..
“AccessDeniedAccess Denied510BA3D30E0F655DArm3v6GRs7c8H9ZLmnTZdl5iUFu4kHfxro4pvUAXBwNj4c07TGq8pm2S3yW5S42e”
( )Blaž February 9th
Same for me, demo broken. Nice tutorial
( )Jeffrey Way February 9th
Sorry about the demo. Brenley, please email the demo that you used.
( )windir February 9th
Nice tut!
I’ll probably use this in a currently ongoing project 
I also need to place a logo on top of the image, and i need to drag and drop the logo to place it to fit.
Anyone know a way to do it? A jquery plugin who can do this natively or something?
( )Shane Sponagle February 9th
Nice tutorial. I can definitely see the potential with this plugin. Thanks
( )Brenelz February 9th
@Jeff
I emailed it to you yesterday afternoon, but I guess didn’t get through? I tryed again so let me know that you received it
( )Brenelz February 9th
For those of you that want a live demo, you can check it out here for now:
http://www.brenelz.com/jcropdemo/
( )Kevin Martin February 9th
@Brenelz, nice tut. I have this plugin installed on a project I’m working on. Really easy to use.
@Muneef, Aptana IDE is OK, not the best of IDE’s though. It is pretty big and loads a bit slow. If you’re a beginner, Aptana is the way to go, but I just use notepad++ since it faster and doesn’t have anything more than I need.
( )Brenelz February 9th
Aptana definately requires a ton of resources, but at times can be handy as it compiles your code as you type it similar to Eclipse so syntax errors are caught instantly…
( )Philsbury February 9th
I’ve used something similar before and found that I needed to chmod the images to 777 straight after saving otherwise their ‘owner’ is php/apache and can’t be changed, might be one to keep in mind.
( )Madger Badger February 9th
Insic looks hot!! :p
( )trs21219 February 9th
nice tutorial here. ill be using it on a site im working on right now with codeigniter. thanks!
( )Jack February 9th
Cool screencast Brenley, jCrop, I like it a lot
I think the source files have been mixed up with another screencast.
Anyone else notice this?
( )Brenelz February 9th
@Philsbury I think I briefly mention in there that the images will need to be chmoded to work on the server. In my example I was just using a local server so it didn’t matter
@Jack yes… the source and demo files have not yet been posed – http://www.brenelz.com/jcropdemo
( )Leon February 9th
Source code link is broken, fix please.
( )The video tutorial is awesome though!
Jack February 9th
@Brenelz looks like it’s all setup now.
Great work on the screencast!
Cheers.
( )-Jack
Thomas Milburn February 9th
Well done Brenelz a brilliant screencast! I can see this plugin having many uses in different projects.
I would warn that this code shouldn’t be used live on the internet “as is” because it does contain some security vulnerabilities. For example the filename isn’t sanitized leading to xss vulnerabilities and the script doesn’t check filenames or paths are valid when opening files leading to much more serious vulnerabilities. There are quite a few modifications I would make to your code if anyone is interested I can email the changes to them.
( )Brenelz February 9th
@thomas thanks for the compliments! I do realize I didn’t totally lock the code down and kept things as basic as I could as it is already almost a 45 min screencast
Passing filenames with a get string is always scary
( )Dani February 9th
You guys really need to add an iPhone d/l link for times like this; when I’m we are stranded.
( )João Pedro Pereira February 9th
Good job.
( )Navdeep February 9th
We just released a Drupal module based on this here http://drupal.org/project/avatarcrop
( )Moksha Solutions February 9th
good tutorial i hope other too come soon, thanks for it
( )Brenelz February 9th
You will see plenty more great screencasts this week! Looking forward to James’ ImgPreview jQuery plugin!!
( )themisfit February 9th
nice tutorial, now I have to learn jQuery.
( )Chris Gunther February 9th
Great screencast, looks like a powerful plugin.
( )Melvin Walls February 9th
Great work! I can’t wait to see all of the other winners
this is just what i was looking for my current project btw
( )Ariyo February 9th
SWEET. Thanks a lot.
( )Shane February 10th
I think it’s fantastic that a plugin such as this makes it so easy to incorporate advanced functionality in our web apps.
Good screencast too!
( )Andris February 10th
Man, that was awesome and exactly what I needed right now. I’m gonna improve my cms with that. Thanx a lot!
( )Doug February 10th
The jCrop plugin is a very useful tool. We use it on our website to crop the images to create thumbnails. It has saved us a ton of time.
I’m sure this tutorial will help beginners out a lot.
( )shin February 10th
Is there any way I can add some size options or custom size input?
( )Chad February 10th
Looking for a wordpress plugin of this…
( )Brenelz February 10th
I am glad you all liked the above screencast. Check out my blog as their will be more great content there as well..
Thanks Jeffery for this opportunity!
( )strony internetowe February 11th
very usefull. nice plugin
( )Y. Steven February 11th
Good job in making those video, i really appreciated that, thank you
( )nignog February 22nd
Umm!
( )Josh February 26th
I do not believe that IE6 recognizes POST values coming from submit buttons. So your if( isset($_POST['submit'])){ … } test you are doing will not work. If you print your post array you will see that in IE6, it is left out of the array. I usually just test if( $_POST ){ … }
( )Josh February 26th
In response to my previous post…actually I think that IE6 only fails when you have multiple submit buttons in the same form. For example, if you have a ’submit’ or ‘delete’ option.
( )ozzy March 10th
Check out webmotionuk’s cropping plugin
http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop-v11/
easy to use and to implement into your exisiting code. great learning material too!
( )Marcel Doornbos March 11th
Really thanks,
I’ve now used it in a Clients portfolio site. Now saves the original file after that creates the thumbnail file and writes all information to a database. at the portfolio gallery the thumbnailfile is clickable and openes the original file in a lightbox window.
Thanks
( )Hanky April 14th
Really nice screencast Brenelz.
Marcel Doornbos, any chance that you could share your work
Im in need of just what you described you have created for a client.
TY
( )Prassanna June 11th
Thanks a lot. It really helps me in my project.
( )Chris Cagle October 14th
For everyone that likes Jcrop, here is a simple tutorial showing you how to get it setup full circle within an application: http://www.cagintranet.com/archive/how-to-use-jcrop-from-within-an-application/
( )