以全分辨率捕获HTML5中的图像 [英] Capturing an image in HTML5 at full resolution

问题描述

可以使用MediaStream API在javascript中捕获图像。但为了做到这一点，首先需要实例化一个视频对象，然后将一个框架绘制到画布中以获得图像。但遗憾的是，许多设备（例如手机）不允许您以设备的完整原始分辨率捕获视频。例如，在我的手机上，最大图像分辨率大约为4000x3000，但最大视频分辨率仅为1920x1080。显然捕获只有可用分辨率的1/6的图像是不可接受的。

It is possible to capture an image in javascript using the MediaStream API. But in order to do so it is first necessary to instantiate a video object, then paint a frame into a canvas to get an image. But unfortunately many devices (e.g. phones) don't allow you to capture a video at the full native resolution of the device. For instance, on my phone the maximum image resolution is on the order of 4000x3000 but the maximum video resolution is a mere 1920x1080. Obviously capturing an image which is only barely 1/6th of the available resolution is unacceptable.

那么如何在设备上访问摄像机的全分辨率？

So how can I access the full resolution of the camera on the device?

推荐答案

您无法使用MediaStream API录制全分辨率图片，但可以使用Media Capture API 。

You can't record a full-resolution picture using the MediaStream API, but you can use the Media Capture API.

MediaStream API能够从摄像机流式传输数据，但视频分辨率为视频。这就是为什么你不能以高分辨率制作照片的原因。

The MediaStream API is able stream data from the camera, but as a video at a video resolution. This is why you can't make photos with a high resolution.

另一种方法是使用 Media Capture API 。它只是通过向accept参数添加 capture = camera 来覆盖 HTMLInput 元素。结果是本机照片应用程序打开以拍照。此功能目前（2017年11月）仅在移动浏览器中实施，所以你仍然如果您需要在桌面上支持此功能，则需要WebRTC作为后备。

The alternative is to use the Media Capture API. It simply overrides the HTMLInput element by adding a capture=camera to the accept parameter. The result is that the native photo app opens to take a picture. This feature is currently (Nov 2017) only implemented in mobile browsers, so you still need WebRTC as a fallback if you need to support this feature on the desktop.

工作示例

var myInput = document.getElementById('myFileInput');

function sendPic() {
    var file = myInput.files[0];

    // Send file here either by adding it to a `FormData` object 
    // and sending that via XHR, or by simply passing the file into 
    // the `send` method of an XHR instance.
    
    console.log(file);
}

myInput.addEventListener('change', sendPic, false);

<input id="myFileInput" type="file" accept="image/*" capture="camera">

我觉得MediaStream API的当前情况是访问桌面摄像头而不是实际用它来拍照与。

I feel like the current situation of the MediaStream API is to access the camera of a desktop and not to actually use it to take photos with.

这篇关于以全分辨率捕获HTML5中的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！