html5 + js:分辨率或大小< input type = file capture = camera> [英] html5+js: resolution or size of <input type=file capture=camera>
问题描述
如何通过< input type = file capture = camera>
设置从手机上传的照片的最大分辨率或最大尺寸?
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>
?
推荐答案
目前有两种基于W3C支持的拍照方式(使用JavaScript / HTML捕获图片):
There are currently two W3C backed ways of taking pictures (image capture with JavaScript / HTML):
[1] HTML媒体捕获
[1] HTML Media Capture
它使用捕获
和在
输入
标签上指定目标的accept =image / *
根据规范, NOT 允许您指定捕获的大小。
It uses capture
and accept="image/*"
on an input
tag to specify the intend.
As per the spec, this way does NOT allow you to specify the size of a capture.
[2]和Streams
允许完全编程访问摄像机,以便您可以实现自己的捕获对话(用于视频和静止图像)。此外,它允许指定这样的约束:
[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:
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
Global Browser support for the second way is 50% so only usable in closed environments: http://caniuse.com/#feat=stream
[1] < a href =http://www.w3.org/TR/html-media-capture/ =nofollow> http://www.w3.org/TR/html-media-capture/
[2] http://dev.w3.org/2011/webrtc/editor/getusermedia.html#constrainable-interface
这篇关于html5 + js:分辨率或大小< input type = file capture = camera>的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!