jQuery Image Cropper with Uploader

Please check the updated version here! Some time ago I posted the Dynamic jQuery Image Gallery with Uploader which uses the class.upload, uploadify and ad-gallery scripts. This time I want to show how to integrate the class.upload and uploadify with the Jcrop script. The idea is that the user uploads a picture,  selects which area […]

jquery_cropper

Please check the updated version here!

Some time ago I posted the Dynamic jQuery Image Gallery with Uploader which uses the class.upload, uploadify and ad-gallery scripts. This time I want to show how to integrate the class.upload and uploadify with the Jcrop script.

The idea is that the user uploads a picture,  selects which area to crop and saves it under a specific directory.
The process then creates two images, one 100×100 and a thumbnail of 50×50. You can easly change the script to create the amount of pictures and sizes you need!

The example here is limited to .jpg images and no more than 800 kb. If you want to add more file types and increase the size, you can configure it when you call the uploadify script (index.php):

'fileExt'         : '*.jpg',
'sizeLimit'      : '819200',//max size bytes - 800kb

and in upload.php:

$handle->file_max_size = '819200'; // max size

Note that an usual error is due to the configuration of the “memory_limit” in php.ini. You should increase this value if you expect to upload larger images.

see the DEMO
download the source code here
Please check the updated version here!





Previous:
Next:

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.

View all contributions by

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

Related Articles

Feedback 40

Comments are closed.
  1. 1

    hey, its me again. another issue i have just noticed is that it doesnt seem to actually crop the images rather than to just resize them to fit the sqaures.

  2. 4

    Hi,

    Its not working in firefox.
    I am not getting the upload button in your demo url even in firefox.
    And in demo image i upload is not getting save .
    I have firefox 3.6.17

  3. 5

    Hi, thanks for this great script, is there a way to upload more images while creating the thumbnails as well?

  4. 6

    Hey man, for some reason I can’t get the images to crop, it acts like it doesn’t see the selected area?

    Any ideas? Thanks man

  5. 7

    Exactly what I need. But I want to use a different image ratio like 150px wide by 100px wide. I want the preview and the dotted line selector guide to be the same aspect ratio? But no matter what I change, the selector guide wants to be square??? Thanks!

  6. 8

    Hi ! Thanks for this great script !! How to resize the image proportionally? thanks !

  7. 9

    Hi ! I’ve found how to resize the image proportionnaly :
    $handle->image_resize = true;
    $handle->image_ratio_x = true;
    $handle->image_y = ($handle->image_src_y image_src_y:600;

    But now, how can i insert the picture name in database ? Please i need help !! Thx a lot

  8. 10

    Sorry ! Corrected an error in my prvious code :
    $handle->image_y = ($handle->image_src_y image_src_y:600;

  9. 12

    Hi,
    I have the web application that requires 4 files of same image to be uploaded into 4 different folders, each time cropping same uploaded image, but to different dimensions.

    I am not able to do changes to the source code to suits my requirements.
    Please can any one help me.

  10. 13

    hi

    i can confirm the resize of the cropped image is not proportionally.

    changed in crop.php
    $handle->image_x = 140;
    $handle->image_y = 180:

    the created image is stretched.

    could you be that kind to reply … thx

  11. 14

    Hey, thanks so much for the great script.

    Besides, thanks for Antonio advice, must download the latest class.upload.php and replaced the original one, everything goes fine now.

  12. 15

    Hello can anybody tell me what must i do .

    everyone when upload a image is only one picture in destinaten call Picture.jpg

    what must i change for upload image

  13. 16

    Any ideas why it stucks at 100% uploading when trying to upload .gif images ?

    I managed to overcome any other obstacles but not this one yet.

    It does fine with png and jpg files.

    I tried this ‘fileExt’ : ‘*.jpg;*.gif;*.png’,

    which seemed to work for all three except that gifs stuck at 100% upload.

  14. 17

    I am pretty new to coding and would like to know how I can save these images to a folder on my server and add them to a mysql db.

Comments are closed.