Question

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

Answer 1

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

[1] HTML媒体捕获

它在capture标记上使用accept="image/*"和input来指定意图。根据规范，这种方式 NOT 允许您指定捕获的大小。

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

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

Global Browser对第二种方式的支持是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中调整它，然后将其作为数据网址恢复。您可以使用this answer使用双线性插值调整大小。这导致我们在某些手机（iphone 5s）上出现性能问题。如果你正在打电话，我会建议你做第一步（将画布减半，将文件大小减少4倍，非常简单，如果你愿意，可以做两次），如果你真的需要，可以做其他事情。到，在服务器上。

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

2 个答案: