I hope this makes my request a bit clearer.

all without further processing on the server side.

You could also use a third-party API like Abstract API's Free Image Resizing API. One of the best client-side libraries available for image resizing is Pica, which provides an API to resize Canvas elements, Images and Image Bitmaps directly in the browser.

faster page views when recalled and faster slideshows There are many ways to resize an image in JavaScript.

reduces upload time and bandwidth usage.

It’s ideal for mobile use but just as good for desktop as it I have implemented this on various sites and it works very well. Images can be automatically resized on client-side with browsers supporting the required JS APIs.Īs an example, this is where the image to be uploaded is automatically resized on the device (mobile or PC) as part of the upload procedure from, say, 8Mb to 300Kb without changing the overall width or height, without cropping the image and without noticeable loss in quality. The idea comes from BlueImp’s jQuery File Upload plugin for PHP and in particular

An image cropping tool would be a welcome addition, as would other editing tools such as adding text, shapes and arrows but all as options. And they certainly have no idea how to reduce the image first, so I need a way to automatically reduce the filesize before the image is uploaded. The user often has no idea about megapixels and how it affects the upload speed. This request is for resizing the image in Megapixels (Mb) rather than Image Resolution (pixels).

The code is available from Github github.Hi and thanks for your suggestions.

Img.src = src Draw an image with a certain size on a Canvas ctx.drawImage(image, 0, 0, 1024, 576) Fill content of a canvas into an image $('#outputImage').attr('src', canvas.toDataURL('image/jpeg')) The image will be filled with base64 encoded data Demo Resizing an Image with Javascript is fairly simple, the key points are: How to create an Image Object var img = new Image() One advantage of this approach, is of course, the smaller upload size. After the image is resized, you can upload it with ajax and store it on the filesystem of your server. It basically boils down to the question if you need to support anything lower than IE 9. If you choose this approach you must be aware that it will only work on Browsers that support Canvas. I decided to resize the images in the client with Javascript.

On a Javascript heavy project, I was facing the same decision and decided to go a different path. Usually when you are implementing an image upload, you have to decide whether you use GD or ImageMagic.

Javascript client side image resize