从网络摄像头拍摄照片并将其保存在服务器上

Question

我想拍照，将其发送到服务器，然后保存到磁盘上。

使用JavaScript函数将照片获取为blob：

takePhoto() {
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  var video = document.getElementById('video');

  document.getElementById("snap").addEventListener("click", function() {
    context.drawImage(video, 0, 0, 640, 480);
  });
  let cp = this.contextPath
  canvas.toBlob(blob => {
    this.saveImage({contextPath: cp, image: blob})
  }, 'image/jpeg')
},

并在服务器上：

File f = new File("IMAGE.jpeg");
    FileOutputStream fos;
    try {
        fos = new FileOutputStream(f);
        f.createNewFile();
        fos.write(file);
    } catch (IOException e) {
        LOGGER.error(e.getMessage());
    }

f是我从前端获得的字节数组

文件已创建，但是当我尝试打开文件时，任何图像查看器或编辑器都说他们无法打开此文件。例如，绘制：

我在做什么错了？

Answer 1

JavaScript不会将文件直接保存到服务器，因此您只是在创建一个空的jpeg文件...您应该将base64 blob发布到服务器并在其中写入文件。