CodeIgniter Forums
Any JavaScript/AJAX library to resize an image for upload? - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forum-20.html)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forum-23.html)
+--- Thread: Any JavaScript/AJAX library to resize an image for upload? (/thread-3585.html)



Any JavaScript/AJAX library to resize an image for upload? - El Forum - 10-11-2007

[eluser]Optimus Prime[/eluser]
Hi!

I want to know if somebody knows about a JavaScript / Ajax Library to resize and crop a image on the client side?

I'm trying to add one to upload images resized instead to resize on the server's side because the images to upload are to larger and heavy. If is possible, to crop an area of the image and upload it.

There is a library like this on the net? Commercial versions are welcome , but i prefer Open-Source/GNU/GPL/LGPL.


Any JavaScript/AJAX library to resize an image for upload? - El Forum - 04-07-2009

[eluser]Unknown[/eluser]
PHP & jQuery image upload and crop v1_2 WebMotionUK


Any JavaScript/AJAX library to resize an image for upload? - El Forum - 04-07-2009

[eluser]CroNiX[/eluser]
[url="http://tools.uvumi.com/crop.html"]Uvumi Crop[/url] for Mootools


Any JavaScript/AJAX library to resize an image for upload? - El Forum - 04-07-2009

[eluser]slowgary[/eluser]
I'm really impressed by Jcrop, a jQuery plugin. Amazing what can be done in JS.

http://deepliquid.com/projects/Jcrop/demos.php?demo=bounds


Any JavaScript/AJAX library to resize an image for upload? - El Forum - 04-07-2009

[eluser]Colin Williams[/eluser]
Quote:I’m trying to add one to upload images resized instead to resize on the server’s side

Just to be clear, the actual cropping of the image (image generation) has to happen on the server. The client-side javascript is only good for generating instructions for the server-side script (x, y, width, height). All the solutions suggested either do only this or have a server-side counterpart that performs the cropping and scaling.


Any JavaScript/AJAX library to resize an image for upload? - El Forum - 04-07-2009

[eluser]Optimus Prime[/eluser]
Hi! Thanks to all to reply this post.

In effect, Colin Williams is right. You must upload an image (the original size o previously resized) and the you can crop or resize the image using the GD library using the parameters generated with the javascript libraries (jQuery, Mootools, etc).

I have not found the solution to date. A javascript library that can resize to a smaller image before the uploading. And I think that it will not be possible in the future for security reasons.

I tried various libraries when I wrote this post. And at the end, I have choosed jCrop for jQuery for my current proyect. (thanks slowgary and fontella)

Uvumi Crop is great for projects with Mootools! (thanks CroNiX).


Any JavaScript/AJAX library to resize an image for upload? - El Forum - 04-07-2009

[eluser]slowgary[/eluser]
For the most part you're right, you'll never be able to do it client-side because JavaScript can't manipulate files.

This MAY not be entirely true though. I haven't done it or seen it done, but it MAY be possible to use JavaScript with the <canvas> tag to get pixel data and send it back to the server. You'd basically use X/Y coordinates to get an array of colors. This would still require a server-side script to reconstitute the image though, and would only be useful for cropping, not resizing. In the end it would probably not save you overhead and would be more work than it's worth.

However if you DO cook up a method for accomplishing client-side image cropping - "I thought of it first right here on the CI forums baby, woohoo!". Thanks for laughing.


Any JavaScript/AJAX library to resize an image for upload? - El Forum - 04-07-2009

[eluser]slowgary[/eluser]
Also, if it's REALLY important that you do this client-side, I'm sure you could do it with Flash.


Any JavaScript/AJAX library to resize an image for upload? - El Forum - 04-08-2009

[eluser]Optimus Prime[/eluser]
The <canvas> tag seems to be an interesting approach for HTML 5. I will study this approach for another proyect.

A flash uploader and resizer is a good option, but no Flash applications is permitted in this project. Thanks Anyway.