10

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

4

2 回答 2

9

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

[1] HTML 媒体捕获

它在标签上使用captureand来指定意图。根据规范，这种方式不允许您指定捕获的大小。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

于 2014-01-17T10:28:59.240 回答
3

如前所述，<input type=file accept="image/*">不允许您指定大小或其他选项。这可能会将您推向getUserMedia(). 但是 getUserMedia()，虽然它可以让您抓取视频流的帧，但似乎没有任何用于拍摄优质静止图像的改进——闪光灯、自动对焦。

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

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

于 2017-03-02T13:20:23.680 回答