html5 + js：<input type = file capture = camera>的分辨率或大小

如何通过<input type=file capture=camera>从手机上传的照片的最大分辨率或最大尺寸？

Answer 1

目前有两种W3C支持的拍照方式（使用JavaScript / HTML进行图像拍摄）：

[1] HTML媒体捕获

它在input标签上使用capture和accept="image/*"来指定打算。 根据规范，这种方式不允许你指定捕获的大小。

[2]媒体捕捉和数据stream允许完全编程访问摄像机，以便您可以实现自己的捕捉对话框（对于video和静止图像）。 此外，它允许指定这样的约束：

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

全球浏览器对第二种方式的支持是50％，因此只能在封闭环境中使用： 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

如上所述， <input type=file accept="image/*">不允许指定大小或其他选项。 这可能会推动你getUserMedia() 。 但 getUserMedia() ，虽然它可以让你抓住一个videostream的帧，似乎没有任何改善，以获得良好的静止 – 闪光，自动对焦。

对我们来说，最好的办法是用<input type=file>来抓取静态图片，然后使用canvas将其大小调整为javascript，然后将其恢复为数据url。 你可以使用这个答案调整双线性插值。 这在一些手机（iphone 5s）上造成了我们的性能问题。 如果你正在使用手机，我会build议你做第一步（将canvas减半，缩小文件大小4倍，非常简单，如果你愿意的话可以做两次），以及其他任何事情，如果你真的需要到，在服务器上。