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.
Tags: Videos
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Brenley Dueck
Hello everyone, I'm Brenley Dueck or better known as Brenelz. I currently
run my own business called Brenelz Web Solutions which focuses primary on
winnipeg website design and development. The web technologies I most specialize in are CSS, jQuery, AJAX, PHP, and the MySQL database. Please make sure to visit my web development blog
and follow me on twitter.
Join our newsletter!
Freelance Jobs
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Great screencast!If this is an example of the quailty of screencasts to follow I am very excited!
as expected. this tutorial is awesome.
Broken link on the “Demo”.
It’s nice. It’s similar to MCImageManager of TinyMCE
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.
Nice tutorial, this could be of great use for my cms.
nice tutorial…
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.
Nice info Brenley… Thanks for sharing !!
great stuff, more and more jQuery pls
seems like the source-code belongs to an other tut. could you fix it, please?
“demo” link is broken please check.
Great tutorial!
Definitely gonna use this in my new project :)
Very nice tutorial!
Nice tut
btw has any one used Aptana IDE ?, just curious
Please fix demo link
Nice tuts !!
I get this error when I try and view the live demo..
“AccessDeniedAccess Denied510BA3D30E0F655DArm3v6GRs7c8H9ZLmnTZdl5iUFu4kHfxro4pvUAXBwNj4c07TGq8pm2S3yW5S42e”
Same for me, demo broken. Nice tutorial
Sorry about the demo. Brenley, please email the demo that you used.
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?
Nice tutorial. I can definitely see the potential with this plugin. Thanks :)
@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
For those of you that want a live demo, you can check it out here for now:
http://www.brenelz.com/jcropdemo/
@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.
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…
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.
Insic looks hot!! :p
nice tutorial here. ill be using it on a site im working on right now with codeigniter. thanks!
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?
@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
Source code link is broken, fix please.
The video tutorial is awesome though!
@Brenelz looks like it’s all setup now.
Great work on the screencast!
Cheers.
-Jack
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.
@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 ;)
You guys really need to add an iPhone d/l link for times like this; when I’m we are stranded.
Good job.
We just released a Drupal module based on this here http://drupal.org/project/avatarcrop
good tutorial i hope other too come soon, thanks for it
You will see plenty more great screencasts this week! Looking forward to James’ ImgPreview jQuery plugin!!
nice tutorial, now I have to learn jQuery.
Great screencast, looks like a powerful plugin.
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 :D
SWEET. Thanks a lot.
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! :)
Man, that was awesome and exactly what I needed right now. I’m gonna improve my cms with that. Thanx a lot!
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.
Is there any way I can add some size options or custom size input?
Looking for a wordpress plugin of this…
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!