ImageCapture: takePhoto() 方法

ImageCapture 接口的 takePhoto() 方法使用视频捕获设备进行单次曝光,该设备以 MediaStreamTrack 作为源,并返回一个 Promise,该 Promise 会解析为一个包含数据的 Blob

语法

js
takePhoto()
takePhoto(photoSettings)

参数

photoSettings 可选

用于设置待拍摄照片选项的对象。可用选项包括:

fillLightMode

捕获设备的闪光灯设置,可选值为 "auto""off""flash"

imageHeight

期望的图像高度(整数)。如果用户代理仅支持离散的高度值,则会选择最接近此设置的高度值。

imageWidth

期望的图像宽度(整数)。如果用户代理仅支持离散的宽度值,则会选择最接近此设置的宽度值。

redEyeReduction

一个布尔值,指示是否应在可用时使用红眼消除功能。

返回值

一个 Promise,它会解析为一个 Blob

异常

InvalidStateError DOMException

如果构造函数中传入的 MediaStreamTrackreadyState 属性不是 live,则抛出此异常。

UnknownError DOMException

如果由于任何原因操作无法完成,则抛出此异常。

示例

此示例摘自 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

浏览器兼容性