我正在尝试从网络摄像头上传图像，但我不确定如何将捕获的图像分配到输入文件字段中。这是代码：
<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;
});
要从用户的相机捕获图像，您可以使用设置为用户的捕获属性。
像这样：
<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 https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
