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

Question

How can I set the maximum resolution or maximum size of a photo uploaded from a mobile phone via a <input type=file capture=camera>?

Answer 1

As noted, <input type=file accept="image/*"> doesn't let you specify size or other options. This might push you towards getUserMedia(). But getUserMedia(), while it lets you grab a frame of a video stream, doesn't seem to have any of the refinements for taking good stills - flash, autofocus.

What works well for us is to grab the still with <input type=file> then resize it in javascript with canvas, then recover it as a data url. You could use this answer to resize with bilinear interpolation. This caused us performance issues on some phones (iphone 5s). If you're on a phone, I would recommend doing the first step (halving the canvas, reducing file-size by a factor of 4, very simple, do it twice if you want), and doing anything else, if you really need to, on the server.

Update: Pica will resize your images in the browser. It leverages webassembly. It has tons of options. Use and enjoy.

Answer 2

There are currently two W3C backed ways of taking pictures (image capture with JavaScript / HTML):

[1] HTML Media Capture

It uses capture and accept="image/*" on an input tag to specify the intend. As per the spec, this way does NOT allow you to specify the size of a capture.

[2] Media Capture and Streams Allows fully programmatic access to the camera so that you can implement your own capture dialogue (for video and still images). Furthermore it allows to specify constraints like this:

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 way is 50% so only usable 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