jQuery Image Cropper with Uploader
Development October 17, 2009 by chadking 8 Comments
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!
Read more
-
jQuery Image Cropper with Uploader v1.1
-
Find Your First Twitter Follower
-
URL Image Getter/Uploader/Resizer
-
Twitter API and jQuery Showcase: Display your Followers or Friends
-
Dynamic jQuery Image Gallery with Uploader
-
Dynamically Changing Style with jQuery
-
A Fresh Bottom Slide Out Menu with jQuery
-
Photo Zoom Out Effect with jQuery
-
Grungy Random Rotation Menu with jQuery and CSS3
-
Neat Photo Hover Effect with CSS Sprites and jQuery
it’s sound great! a lovely features like gravatar, facebook, etc… thanks for share !!
It could be nice if wordress add this build-in feature in next versions !
adeux
Uploaded this to my domain and could not get it to work at all. I can upload an image fine but jcrop never appears so i can crop the image. Any ideas what i could do to get this working cos I love it and need it.
To continue my last comment, i tried a basic alert(’hello’); on uploadify onComplete function and it doesn’t work. Please help…
Hi Carlos!
I have tested it on my local machine and it seems to work fine. I have read some other comments that it doesn’t work, but I am not sure what exactly is causing that problem, since it’s working for me either on my local machine or here at Codrops. The only reason I could think of, is the size of the image you are uploading. Try to upload some small image first. You can set a different limit in the script afterwards.
Let me know your results. I will try to find out what the problem might be.
Regards