javascript html5+js: <input type=file capture=camera> 的分辨率或大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17004981/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html5+js: resolution or size of <input type=file capture=camera>
提问by sina
How can I set the maximum resolution or maximum size of a photo uploaded from a mobile phone via a <input type=file capture=camera>?
如何设置手机上传照片的最大分辨率或最大尺寸<input type=file capture=camera>？
回答by vanthome
There are currently two W3C backed ways of taking pictures (image capture with JavaScript / HTML):
目前有两种 W3C 支持的拍照方式（使用 JavaScript / HTML 进行图像捕获）：
[1] HTML Media Capture
[1] HTML 媒体捕获
It uses captureand accept="image/*"on an inputtag to specify the intend.
As per the spec, this way does NOTallow you to specify the size of a capture.
它在标签上使用capture和来指定意图。按照规范，这种方式确实不是允许你指定捕获的大小。accept="image/*"input
[2] Media Capture and Streams Allows fully programmatic access to the camera so that you can implement your own capture dialogue (for video and still images). Furthermore it allows to specify constraints like this:
[2] 媒体捕获和流 允许完全以编程方式访问相机，以便您可以实现自己的捕获对话（视频和静止图像）。此外，它允许指定这样的约束：
mandatory: {
width: { min: 640 },
height: { min: 480 }
},
optional: [
{ width: 650 },
{ width: { min: 650 }},
{ frameRate: 60 },
{ width: { max: 800 }},
{ facingMode: "user" }
]
}
Global Browser support for the second way is 50% so only usable in closed environments: http://caniuse.com/#feat=stream
全局浏览器对第二种方式的支持为 50%，因此只能在封闭环境中使用：http: //caniuse.com/#feat=stream
[1] http://www.w3.org/TR/html-media-capture/
[1] http://www.w3.org/TR/html-media-capture/
[2] http://dev.w3.org/2011/webrtc/editor/getusermedia.html#constrainable-interface
[2] http://dev.w3.org/2011/webrtc/editor/getusermedia.html#constrainable-interface
回答by bbsimonbb
As noted, <input type=file accept="image/*">doesn't let you specify size or other options. This might push you towards getUserMedia(). ButgetUserMedia(), while it lets you grab a frame of a video stream, doesn't seem to have any of the refinements for taking good stills - flash, autofocus.
如前所述，<input type=file accept="image/*">不允许您指定大小或其他选项。这可能会将您推向getUserMedia(). 但是getUserMedia()，虽然它可以让您抓取视频流的一帧，但似乎没有任何拍摄优质静止图像的改进 - 闪光灯、自动对焦。
What works well for us is to grab the still with <input type=file>then resize it in javascript with canvas, then recover it as a data url. You could use this answerto resize with bilinear interpolation. This caused us performance issues on some phones (iphone 5s). If you're on a phone, I would recommend doing the first step (halving the canvas, reducing file-size by a factor of 4, very simple, do it twice if you want), and doing anything else, if you really need to, on the server.
对我们来说最有效的方法是抓取静止图像，<input type=file>然后使用画布在 javascript 中调整其大小，然后将其恢复为数据 url。您可以使用此答案通过双线性插值调整大小。这导致我们在某些手机（iphone 5s）上出现性能问题。如果您在使用手机，我建议您执行第一步（将画布减半，将文件大小减少 4 倍，非常简单，如果您愿意，可以执行两次），然后执行其他任何操作（如果您确实需要）到，在服务器上。
