在此页

• 句法
• 范例
• 规范
• 浏览器兼容性
• 相关话题

takePhoto() 方法在 ImageCapture interface takes a single exposure using the video capture device sourcing a MediaStreamTrack 并返回 Promise that resolves with a Blob containing the data.

句法

const blobPromise = imageCaptureObj.takePhoto([photoSettings])
					

参数

photoSettings 可选

An object that sets options for the photo to be taken. The available options are:

• fillLightMode :  The flash setting of the capture device, one of "auto" , "off" ，或 "flash" .
• imageHeight : The desired image height as an integer. The user agent selects the closest height value to this setting if it only supports discrete heights.
• imageWidth : The desired image width as an integer. The user agent selects the closest width value to this setting if it only supports discrete widths.
• redEyeReduction : A boolean indicating whether the red-eye reduction should be used if it is available.

返回值

A Promise that resolves with a Blob .

范例

This example is extracted from this Simple Image Capture demo . It shows how to use the Promise 返回通过 takePhoto() to copy the returned Blob to an <img> element. For simplicy it does not show how to instantiate the ImageCapture 对象。

var takePhotoButton = document.querySelector('button#takePhoto');
var canvas = document.querySelector('canvas');
takePhotoButton.onclick = takePhoto;
function takePhoto() {
  imageCapture.takePhoto().then(function(blob) {
    console.log('Took photo:', blob);
    img.classList.remove('hidden');
    img.src = URL.createObjectURL(blob);
  }).catch(function(error) {
    console.log('takePhoto() error: ', error);
  });
}
					

规范

规范	状态	注释
MediaStream 图像捕获 The definition of 'takePhoto()' in that specification.	工作草案	初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
takePhoto	Chrome 60 60 59 — 60 注意事项 photoSettings argument not supported.	Edge ≤79	Firefox ?	IE ?	Opera 47 47 46 — 47 注意事项 photoSettings argument not supported.	Safari ?	WebView Android 60 60 59 — 60 注意事项 photoSettings argument not supported.	Chrome Android 60 60 59 — 60 注意事项 photoSettings argument not supported.	Firefox Android ?	Opera Android 44 44 43 — 44 注意事项 photoSettings argument not supported.	Safari iOS ?	Samsung Internet Android 8.0 8.0 7.0 — 8.0 注意事项 photoSettings argument not supported.

图例

完整支持

完整支持

兼容性未知 ?

兼容性未知

实验。期望将来行为有所改变。

实验。期望将来行为有所改变。

见实现注意事项。

元数据

• 最后修改： Feb 11, 2020

相关话题

1. ImageCapture
2. 构造函数

   1. ImageCapture() constructor
3. 特性

   1. track
4. 方法

   1. getPhotoCapabilities()
   2. getPhotoSettings()
   3. grabFrame()
   4. takePhoto()
5. 继承：

   1. EventTarget