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

Question

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

Answer 1

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

[1] HTML媒体捕获

它采用了capture与accept="image/*"上一个input标记指定的打算.按照规范,这种方式确实不是允许你指定捕获的大小.

[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将在浏览器中调整图像的大小。它利用网络组装。它有很多选择。使用并享受。