以全分辨率拍摄 HTML5 中的图像
Capturing an image in HTML5 at full resolution
可以使用 MediaStream API 在 javascript 中捕获图像。但为了这样做,首先需要实例化一个视频对象,然后将帧绘制到 canvas 中以获得图像。但不幸的是,许多设备(例如 phones)不允许您以设备的完整原始分辨率捕获视频。例如,在我的 phone 上,最大图像分辨率约为 4000x3000,但最大视频分辨率仅为 1920x1080。显然,捕获的图像仅是可用分辨率的 1/6 是不可接受的。
那么如何才能在设备上访问相机的完整分辨率?
您无法使用 MediaStream API 录制全分辨率图片,但您可以使用媒体捕获 API。
MediaStream API 能够从相机流式传输数据,但作为视频分辨率的视频。这就是为什么你不能拍出高分辨率的照片。
替代方法是使用 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,因此如果您需要在桌面上支持此功能,您仍然需要 WebRTC 作为备用。
工作示例
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是访问桌面摄像头而不是实际使用它来拍照。
可以使用 MediaStream API 在 javascript 中捕获图像。但为了这样做,首先需要实例化一个视频对象,然后将帧绘制到 canvas 中以获得图像。但不幸的是,许多设备(例如 phones)不允许您以设备的完整原始分辨率捕获视频。例如,在我的 phone 上,最大图像分辨率约为 4000x3000,但最大视频分辨率仅为 1920x1080。显然,捕获的图像仅是可用分辨率的 1/6 是不可接受的。
那么如何才能在设备上访问相机的完整分辨率?
您无法使用 MediaStream API 录制全分辨率图片,但您可以使用媒体捕获 API。
MediaStream API 能够从相机流式传输数据,但作为视频分辨率的视频。这就是为什么你不能拍出高分辨率的照片。
替代方法是使用 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,因此如果您需要在桌面上支持此功能,您仍然需要 WebRTC 作为备用。
工作示例
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是访问桌面摄像头而不是实际使用它来拍照。