我可以将使用 getUserMedia 收到的值传输到输入文件吗？答案

【问题标题】：Can I transfer the value received with getUserMedia to the input file?我可以将使用 getUserMedia 收到的值传输到输入文件吗？
【发布时间】：2021-10-28 02:59:33
【问题描述】：

我有一个在 webview 下运行的 html5 网络应用程序。

我想通过从用户的相机拍照来发送带有表单 enctype multipart/form-data 的数据。

我在输入类型文件中尝试了一些东西，但不幸的是，当我在所有这些文件中按“选择文件”时，它会打开相机和文件选择列表。

<form action="/upload.asp" method="post" enctype="multipart/form-data">

    <input type="file" id="cameraPic" accept="image/*;capture=camera" /><br>
    <input type="file" id="cameraPic" capture="environment" accept="image/*"/><br>
    <input type="file" id="cameraPic" capture="user" accept="image/*"/><br>
    <input type="file" id="cameraPic" name="profile_pic" accept=".jpg, .jpeg"/><br>

  <input type="submit">
</form>

所以我想尝试使用“mediaDevices.getUserMedia”捕获并上传相机。

使用下面的代码，我可以拍照并在页面上查看。但是如何将图像从页面发送到后端？

输入文件值的分配（我认为这不是出于安全原因）
找到Base64代码并上传到Textarea并发送。
将“上传”按钮放在“拍照”按钮旁边。

我不确定要做什么以及如何去做？

我不知道我的路径是否正确。

另一个问题是“getUserMedia”后置摄像头无法打开。

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Take Photo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    html,body,video {margin:0;padding:0;}
    button {height:3em;width:10em;left:0;top:0;position:fixed;}
    video {height:3em;width:10em;right:0;top:0;position:fixed;}
    #takePhotoCanvas {width:100vw;height:100vh;left:0;top:3em;position:fixed;}
  </style>
</head>
<body>

<button onclick="takePhotoButton()">Take Photo</button>
<video autoplay=""></video>
<canvas id="takePhotoCanvas"></canvas>



<script>
var imageCapture;

navigator.mediaDevices.getUserMedia({video: true})
.then(mediaStream => {
document.querySelector('video').srcObject = mediaStream;

const track = mediaStream.getVideoTracks()[0];
imageCapture = new ImageCapture(track);
})
.catch(error => console.log(error));


function grabFrameButton() {
  imageCapture.grabFrame()
  .then(imageBitmap => {
    const canvas = document.querySelector('#grabFrameCanvas');
    drawCanvas(canvas, imageBitmap);
  })
  .catch(error => console.log(error));
};

function takePhotoButton() {
  imageCapture.takePhoto()
  .then(blob => createImageBitmap(blob))
  .then(imageBitmap => {
    const canvas = document.querySelector('#takePhotoCanvas');
    drawCanvas(canvas, imageBitmap);
  })
  .catch(error => console.log(error));
};

/* Utils */

function drawCanvas(canvas, img) {
  canvas.width = getComputedStyle(canvas).width.split('px')[0];
  canvas.height = getComputedStyle(canvas).height.split('px')[0];
  let ratio  = Math.min(canvas.width / img.width, canvas.height / img.height);
  let x = (canvas.width - img.width * ratio) / 2;
  let y = (canvas.height - img.height * ratio) / 2;
  canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
  canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height,
      x, y, img.width * ratio, img.height * ratio);
};

</script>
</body>
</html>

【问题讨论】：

您可能会发现查看这些WebRTC Samples 会有所帮助。它们向您展示了有关图像捕获和相机选择的一些信息。
这能回答你的问题吗？ How can I capture an image via the user's webcam using getUserMedia?
@O.Jones 它在我的代码中捕获和传输画布图像。但我需要将画布上的图像发布到服务器。

标签： file input upload getusermedia

【解决方案1】：

这个MDN tutorial值得。

看来你需要canvas.toBlob()。

这样的事情可能会奏效。

canvas.toBlob(function (blob){
   const fd = new FormData();
   fd.append('fname', 'pic.jpg');
   fd.append('data', blob);
   $.ajax({
       type: 'POST',
       url: '/uploadedendpoint ',
       data: fd,
       processData: false,
       contentType: false
    })
    .done(function(data) {
       console.log(data);
}, 'image/jpeg')

这使用 jquery ajax 调用从画布发布编码的 jpeg 图片。

未调试...这取决于您。

【讨论】：