Html5 + js: resolution or size <input type = file capture = camera>

Question

How to set the maximum resolution or maximum size of a photo downloaded from a mobile phone using <input type=file capture=camera> ?

Answer 1

There are currently two W3C-supported shooting methods (capturing images using JavaScript / HTML):

[1] Capturing HTML files

It uses capture and accept="image/*" in the input tag to indicate intend. According to the specification, this method does NOT allow you to specify the capture size.

[2] Capturing and streaming media Allows full programmatic access to the camera so you can implement your own capture dialog (for video and still images). In addition, it allows you to specify the following restrictions:

 mandatory: { width: { min: 640 }, height: { min: 480 } }, optional: [ { width: 650 }, { width: { min: 650 }}, { frameRate: 60 }, { width: { max: 800 }}, { facingMode: "user" } ] } 

Global browser support for the second method is 50%, so it can only be used in closed environments: http://caniuse.com/#feat=stream

[1] http://www.w3.org/TR/html-media-capture/

[2] http://dev.w3.org/2011/webrtc/editor/getusermedia.html#constrainable-interface

Answer 2

As noted, <input type=file accept="image/*"> does not allow you to specify the size or other parameters. This may push you to getUserMedia() . But getUserMedia() , while it allows you to capture a frame of a video stream, does not seem to have any improvements for taking good photos - flash, autofocus.

What is good for us is to still capture using <input type=file> , and then resize it in javascript using the canvas, and then restore it as the data URL. You can use this answer to resize using bilinear interpolation. This caused performance issues on some phones (iphone 5s). If you are talking on the phone, I would recommend taking the first step (reducing the size of the canvas by reducing the file size by 4 times is very simple, doing it twice if you want) and doing something else if you really need to, on the server.