jQuery Image Cropper with Uploader v1.1

Here’s an updated version of the Image Cropper. The upload button was replaced by an overlay on the image. There are also some extra functionalities : invert the picture colors rotate the image sepia transforms an image into greyscale see the DEMO download the source code here

From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.

crop1_1

Here’s an updated version of the Image Cropper. The upload button was replaced by an overlay on the image. There are also some extra functionalities :

  • invert the picture colors
  • rotate the image
  • sepia
  • transforms an image into greyscale

see the DEMO
download the source code here

Tagged with:

Chadking is an absolute geek that rarely leaves the comfort of his 3-screen desk. He is a self taught programmer and is addicted to all possible legal drugs.

http://tympanus.net/codrops/author/chadking/

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 42

Comments are closed.
  1. Pingback: jQuery Image Cropper with Uploader | Codrops

  2. Pingback: uberVU - social comments

  3. Pingback: jQuery Image Cropper — recadrer et uploader des images » Javascript & Web Design - Tous les jours le meilleur des ressources Javascript pour intégrateurs web front-end (avec parfois un soupçon de PHP)

  4. HI! Thanks for combining two great jquery scripts.. I was wondering, do you know if this will work well with WordPress?

  5. Hi, I think that there is a problem in the archive, because, when i install the script, i see the same page as the demo, i can choose a file, but it’s stop at processing.
    Can you help me ?

    Thanks

    • Hi Marc, I have just downloaded the file and installed again (xampp) and it seems to work fine. What size of picture are you trying to upload? Just try some small one first… You can then configure that value in the script.
      Regards

  6. it’s the same for me, i’ve just download and extract it, and when i tried to upload, it’s stop at processing.
    I tried with different pictures and it’s always the same. (I tried with a 45kb picture… the script default value is 800kb, and yes, when i tried a 2mb file, i have a size error, so the problem is not the size…).
    I’ve looked the script but I didn’t seen what can be the problem…
    Any other ideas ?
    Thanks

    • Hi martino, I have just tested it again in 2 computers – download, extract to htdocs (I am using xampp) and it works fine. Where are you deploying this script?

  7. first i’ve tried with easyphp, then with wamp server, and it’s stop at processing, and i’ve just download and tried with xampp and it’s work…
    I’ve also tried online (1&1 account) and its stop again at processing…
    so now i try to find why its only work well with xampp. If I found I will share the solution here, but any ideas are welcome

  8. If you have trouble running the script, it has the function ereg no longer available for some version of php, which is used in the script upload.class.php.

    The latest version of this script is available here:
    http://www.verot.net/php_class_upload.htm

    The problem … is that the upload script has been changed in this plugin …

    Solution: look for lines that takes problems, and replace the same in the latest version of the script upload.class.php.

    Good luck!

  9. I have the same problem, it’s block at processing,i try to remplace the class.upload.php but it doesn’t work, please help me

  10. You can see in the current upload class, some lines added (search the word ‘updated’ in comments).

    You need to copy these lines in the last release of upload class.

  11. ok i got it to work i replaced the ereg with preg_match. however, should it replace the image for each upload? or does it give each image a unique name?

  12. Hello,
    that’s exactly what I wanted.
    Just one question, how to make the thumbnail and preview make 450 x 120px ?

    thank you

  13. Doesn’t work for me neither. I downloaded the latest upload class, nothing changed.

    I can upload and crop the image, but when I hit the save button, the image is gone and I’m back to the index page. The image is nowhere to be found in the folders.

    I’m using wampserver.

    Anyway thanks for the great script.

  14. @Moonwalker:

    You’re using the demo files, right?

    Just replace the paths in line 22 and 38 in crop.php to get it right.

    Hope that helps!

  15. Hi !

    Thanks for this great script !
    So I use a single upload but I’d like to send a new image without having to click on the cancel button and reload the entire page. How can i do that ? It’s possible ?

    Thanks for your help.