Compress camera input before upload

Question

I am quite new to doing thing with uploading etc. But currently I am building an application that can capture a picture to send it to a database for further use (which is irrelevant for this). When I capture a image and try to upload it it takes alot of time. So I would like to compress the image, before uploading it. But I cant figure out how to acomplisch this.

This is the code that I have for the image capturing:

HTML:

<input type="file" accept="image/*" id="capture" capture="camera">

JS:

document.getElementById('capture').onchange = function(){
  var reader = new FileReader();
  reader.onload = function(e){
    $('.field-wrapper.camera').css('background-image', 'url('+e.target.result+')')
    $('.camera-icon').hide();
    imageUrl = e.target.result;
  };
  reader.readAsDataURL(this.files[0]);
}

Anyone who can help me with compressing my image before uploading? Would be greatly appreciated! :)

The camera image from a mobile device is (on every device I've ever heard of) a JPEG compressed image already, and can't be compressed significantly more. — Pointy, Sep 17 '15 at 12:42
So there is no way to get the size a bit smaller? They are around 2-3mb but that's a bit to high for uploading. Maybe you have another solution? :) — Tom Luijten, Sep 17 '15 at 13:08
Well digital camera images, especially from modern high-megapixel imaging mechanisms, are just big. JPEG compression is used for that reason - it's an efficient way to compress image data. It's a lossy compression format, which means that it's already throwing away part of the original image. Every mobile application that involves image upload is faced with exactly the same problem. — Pointy, Sep 17 '15 at 13:11
I see. Well..that's a pity. I guess I just have to make sure I have a good internet connection! Just a last question, to be sure: Is it possible to scale the image before uploading? Now they are something like 3000x2000 px. I can do this once they are uploaded in the backend, but I don't know if this is possible before the actual upload :) — Tom Luijten, Sep 17 '15 at 13:21

score 0 · Answer 1 · answered Mar 18 '22 at 02:07

In case you are facing the 413 http code error "payload too large" when trying to upload a photo from HTML client to a Express Node JS server then you can use this answer by @João Pimentel Ferreira. What it worked for me specifically was to configure the following line inside a http block in Nginx configuration.

client_max_body_size 50M;

If you don't know if your app is served/proxied by Nginx, contact your hosting.

Compress camera input before upload

1 Answers1