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

Question

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

我想通过从用户的相机拍摄照片来发送格式为 enctype multipart/form-data 的数据。

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

<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>

Answer 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 调用 post 来自 canvas 的编码 jpeg 图片。

未调试...由您决定。

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

Can I transfer the value received with getUserMedia to the input file?

file

input

upload

getusermedia