如何将摄像头捕获的图像插入到input type=file文件上传字段中

问题描述 #

我正在实现摄像头拍摄图片上传的功能，但不清楚如何将拍摄得到的图片赋值给input file文件选择字段，我的现有代码如下：

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

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

我需要将canvas中存储的图片内容写入到id为document的input file字段中，现有JS代码如下：

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;
 });

解决方案 #

input[type=file]的files属性默认是只读的，无法直接赋值，需要借助DataTransfer接口构造文件列表，再赋值给该属性，修改后的完整JS代码如下：

const player = document.getElementById('player');
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const captureButton = document.getElementById('capture');
const fileInput = document.getElementById('document'); // 新增获取文件选择框元素

const constraints = {
  video: true,
};

captureButton.addEventListener('click', (e) => {
  e.preventDefault();
  // 绘制当前视频帧到画布
  context.drawImage(player, 0, 0, canvas.width, canvas.height);

  // 将画布内容转为Blob对象
  canvas.toBlob((blob) => {
    // 构造File对象，可自定义文件名和格式
    const capturedFile = new File([blob], "拍摄图片.png", { type: "image/png" });
    // 创建DataTransfer实例用于构造文件列表
    const dataTransfer = new DataTransfer();
    dataTransfer.items.add(capturedFile);
    // 把构造好的文件列表赋值给文件选择框
    fileInput.files = dataTransfer.files;

    // 可在此处添加提交逻辑，或者打印验证赋值结果
    console.log('已赋值的文件：', fileInput.files[0]);
  }, "image/png");
});

navigator.mediaDevices.getUserMedia(constraints)
  .then((stream) => {
    player.srcObject = stream;
  });

注意事项 #

• 如需导出JPG格式图片，可将代码中的image/png替换为image/jpeg，同时可在toBlob方法第三个参数指定图片质量，取值范围0~1，示例：canvas.toBlob(callback, 'image/jpeg', 0.9)表示导出90%质量的JPG图片
• DataTransfer接口兼容所有主流现代浏览器，仅IE系列浏览器不支持，如有兼容IE的需求可直接构造FormData提交，无需赋值给input元素

内容的提问来源于stack exchange，提问作者artiest