Using the jCrop Plugin
videos

Working with the jCrop Plugin

on Feb 9th 2009 with 68 comments

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

Rollover to read this author's bio or click through to see a full list of posts by this author.

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.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
Newer Comments →
  • http://iamgp.com Gareth

    Great screencast!If this is an example of the quailty of screencasts to follow I am very excited!

  • http://blog.insicdesigns.com insic

    as expected. this tutorial is awesome.

  • Patrik

    Broken link on the “Demo”.

  • http://javiro.com/ Javiro

    It’s nice. It’s similar to MCImageManager of TinyMCE

  • http://www.milesj.me Miles Johnson

    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.

  • http://www.limess.nl/webdesign-Groningen/ Webdesign Groningen

    Nice tutorial, this could be of great use for my cms.

  • http://twitter.com/saurabhshah Saurabh Shah

    nice tutorial…

  • http://andrew-turner.com Andrew Turner

    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.

  • http://www.instantshift.com DKumar M.

    Nice info Brenley… Thanks for sharing !!

  • http://yoosuf.awardspace.com/ M.A.Yoosuf

    great stuff, more and more jQuery pls

  • John

    seems like the source-code belongs to an other tut. could you fix it, please?

  • http://www.ahmetalpbalkan.com Ahmet Alp Balkan

    “demo” link is broken please check.

  • http://www.sanneterpstra.com/ Sanne

    Great tutorial!
    Definitely gonna use this in my new project :)

  • Devin

    Very nice tutorial!

  • http://muneef.in/ Muneef

    Nice tut
    btw has any one used Aptana IDE ?, just curious

  • http://texo.co.za Texo

    Please fix demo link

  • rachid

    Nice tuts !!

  • http://kayceen.com Kristien

    I get this error when I try and view the live demo..

    “AccessDeniedAccess Denied510BA3D30E0F655DArm3v6GRs7c8H9ZLmnTZdl5iUFu4kHfxro4pvUAXBwNj4c07TGq8pm2S3yW5S42e”

  • Blaž

    Same for me, demo broken. Nice tutorial

  • http://themeforest.net/user/JeffreyWay Jeffrey Way

    Sorry about the demo. Brenley, please email the demo that you used.

  • http://www.windmedia.no windir

    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?

  • http://www.modxguru.com Shane Sponagle

    Nice tutorial. I can definitely see the potential with this plugin. Thanks :)

  • http://blog.brenelz.com Brenelz
    Author

    @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

  • http://blog.brenelz.com Brenelz
    Author

    For those of you that want a live demo, you can check it out here for now:

    http://www.brenelz.com/jcropdemo/

  • http://synarchydesign.com Kevin Martin

    @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.

  • http://blog.brenelz.com Brenelz
    Author

    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

    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

    Insic looks hot!! :p

  • http://tomschlick.com trs21219

    nice tutorial here. ill be using it on a site im working on right now with codeigniter. thanks!

  • Jack

    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?

  • http://blog.brenelz.com Brenelz
    Author

    @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

    Source code link is broken, fix please.
    The video tutorial is awesome though!

  • Jack

    @Brenelz looks like it’s all setup now.

    Great work on the screencast!

    Cheers.
    -Jack

  • http://instantsolve.net/blog/ Thomas Milburn

    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.

  • http://blog.brenelz.com Brenelz
    Author

    @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 ;)

  • http://Invisila.com Dani

    You guys really need to add an iPhone d/l link for times like this; when I’m we are stranded.

  • http://joaopedropereira.com/blog/ João Pedro Pereira

    Good job.

  • http://dezinerfolio.com Navdeep

    We just released a Drupal module based on this here http://drupal.org/project/avatarcrop

  • http://mokshasolutions.com Moksha Solutions

    good tutorial i hope other too come soon, thanks for it

  • http://blog.brenelz.com Brenelz
    Author

    You will see plenty more great screencasts this week! Looking forward to James’ ImgPreview jQuery plugin!!

  • http://simonewphoto.com themisfit

    nice tutorial, now I have to learn jQuery.

  • http://chrisgunther.net Chris Gunther

    Great screencast, looks like a powerful plugin.

  • Pingback: Screencast Week! - NETTUTS

  • http://www.qzpstudios.com Melvin Walls

    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

  • http://www.ariyoshahry.net Ariyo

    SWEET. Thanks a lot.

  • http://www.freshclickmedia.com Shane

    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! :)

  • http://www.linzproductions.ch Andris

    Man, that was awesome and exactly what I needed right now. I’m gonna improve my cms with that. Thanx a lot!

  • Pingback: links for 2009-02-10 | This Inspires Me

  • Doug

    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.

  • http://shinokada.blogspot.com/ shin

    Is there any way I can add some size options or custom size input?

Newer Comments →