如何将网络摄像头捕获的图像放入输入文件答案

【问题标题】：How to put captured image from webcam into input file如何将网络摄像头捕获的图像放入输入文件
【发布时间】：2021-11-19 21:19:02
【问题描述】：

我正在尝试从网络摄像头上传图像，但我不确定如何将捕获的图像分配到输入文件字段。代码如下：

<input type="file" id="document">

<video id="player" controls autoplay></video>
<button id="capture">Capture</button>
<canvas id="canvas" width=320 height=240></canvas>

我必须使用id="document" 将画布图像放入我的输入文件字段中：

const player = document.getElementById('player');
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const captureButton = document.getElementById('capture');
  
const constraints = {
   video: true,
};
  
captureButton.addEventListener('click', (e) => {
   context.drawImage(player, 0, 0, canvas.width, canvas.height);
   e.preventDefault();
 });
  
navigator.mediaDevices.getUserMedia(constraints)
 .then((stream) => {
  player.srcObject = stream;
 });

【问题讨论】：

标签： javascript html capture

【解决方案1】：

要从用户的相机中捕获图像，您可以使用设置为用户的捕获属性。

就像这样：

<label for="theImageFile">Upload photo from live camera:</label>
<input type="file" id="theImageFile" capture="user" accept="image/*">

在此处了解更多信息：https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture

【讨论】：

谢谢，但它只适用于手机而不是电脑