Organizational Research By

Surprising Reserch Topic

image resizing client side with javascript before upload to the server

image resizing client side with javascript before upload to the server  using -'javascript,image,resize,client-side'

I would like to know if it is technically possible to resize an image at a client-side with javascript (really resize, not just change width and height). I know it's possible to do it in flash but I would like to avoid it if possible. Is there any open source algorithm somewhere on the web?

asked Sep 16, 2015 by vijaygupta1980
0 votes

Related Hot Questions

6 Answers

0 votes

The answer to this is yes - in HTML 5 you can resize images client-side using the canvas element. You can also take the new data and send it to a server. See this tutorial:

answered Sep 16, 2015 by tejas lakhani
0 votes

Not sure why you want to do this... but if you where resizing before uploading I just found out this it does all the magic for you in any imaginable method.

Unfortunatelly HTML5 resize only is suported with Mozilla borwser, but you can redirect other browsers to flash and silverlight.

I just tried it and worked with my android!.

I was using in flash, it does the job very well, but the resize size is very small. (cannot remember the limit) and does not go back to html4 when flash is not available.

answered Sep 16, 2015 by virendra.bajaj
0 votes

Perhaps with the canvas tag (though it's not portable). There's a blog about how to rotate an image with canvas here, I suppose if you can rotate it, you can resize it. Maybe it can be a starting point.

See there also.

answered Sep 16, 2015 by mtabakade
0 votes

HTML5: Image resizing is only possible on Firefox 3.5+ and only at a fixed quality. WebKit/Opera doesn't support direct data access to the selected files.

The rest it handles with Flash.

answered Sep 16, 2015 by patilkiran.101
0 votes

Here's a gist which does this:

(an es6 version, and a .js version which can be included in a script tag)

You can use it as follows:

It includes a bunch of support detection and polyfills to make sure it works on as many browsers as I could manage.

(it also ignores gif images - in case they're animated)

answered Sep 16, 2015 by abhi
0 votes

It it will be possible with html5.

For now, you can use Silverlight to do it. Here is a great starting point.

answered Sep 16, 2015 by mannar kande