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

Question

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

Answer 1

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

[1] HTML 媒体捕获

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

[2] 媒体捕获和流 允许完全以编程方式访问相机，以便您可以实现自己的捕获对话（用于视频和静止图像）。 此外，它允许指定这样的约束：

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() ，虽然它可以让你抓取视频流的一帧，但似乎没有任何拍摄好的静止图像的改进 - 闪光灯，自动对焦。

对我们有用的是用<input type=file>抓取静止图像，然后用画布在 javascript 中调整它的大小，然后将其恢复为数据 url。 您可以使用此答案通过双线性插值调整大小。 这导致我们在某些手机（iphone 5s）上出现性能问题。 如果您使用手机，我建议您执行第一步（将画布减半，将文件大小减少 4 倍，非常简单，如果您愿意，可以执行两次），然后执行其他任何操作（如果您确实需要）到，在服务器上。

更新： Pica将在浏览器中调整您的图像大小。 它利用了 webassembly。 它有很多选择。 使用和享受。