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

Posted 2023-02-24

【中文标题】html5+js：<input type=file capture=camera>的分辨率或大小

【英文标题】：html5+js: resolution or size of <input type=file capture=camera>

【发布时间】：2013-06-04 23:50:11

【问题描述】：

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

【问题讨论】：

***.com/questions/8212041/…

我的设备正在拍摄非常大的照片，无论data-max-size 的值是多少。文件非常大，我想知道是否可以告诉设备拍摄更小的照片或将照片保存为更小的尺寸并上传。

【参考方案1】：

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

[1] HTML 媒体捕获

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

[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

【参考方案2】：

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

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

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