ImageCapture: takePhoto() 方法
ImageCapture 接口的 takePhoto() 方法使用视频捕获设备进行单次曝光,该设备以 MediaStreamTrack 作为源,并返回一个 Promise,该 Promise 会解析为一个包含数据的 Blob。
语法
js
takePhoto()
takePhoto(photoSettings)
参数
photoSettings可选-
用于设置待拍摄照片选项的对象。可用选项包括:
fillLightMode-
捕获设备的闪光灯设置,可选值为
"auto"、"off"或"flash"。 imageHeight-
期望的图像高度(整数)。如果用户代理仅支持离散的高度值,则会选择最接近此设置的高度值。
imageWidth-
期望的图像宽度(整数)。如果用户代理仅支持离散的宽度值,则会选择最接近此设置的宽度值。
redEyeReduction-
一个布尔值,指示是否应在可用时使用红眼消除功能。
返回值
异常
InvalidStateErrorDOMException-
如果构造函数中传入的
MediaStreamTrack的readyState属性不是live,则抛出此异常。 UnknownErrorDOMException-
如果由于任何原因操作无法完成,则抛出此异常。
示例
此示例摘自 Simple Image Capture 演示。它展示了如何使用 takePhoto() 返回的 Promise 将返回的 Blob 复制到一个 <img> 元素。为简化起见,它没有展示如何实例化 ImageCapture 对象。
js
let takePhotoButton = document.querySelector("button#takePhoto");
let canvas = document.querySelector("canvas");
takePhotoButton.onclick = takePhoto;
function takePhoto() {
imageCapture
.takePhoto()
.then((blob) => {
console.log("Took photo:", blob);
img.classList.remove("hidden");
img.src = URL.createObjectURL(blob);
})
.catch((error) => {
console.error("takePhoto() error: ", error);
});
}
规范
| 规范 |
|---|
| MediaStream 图像捕获 # dom-imagecapture-takephoto |
浏览器兼容性
加载中…