javascript从网络摄像头拍摄照片并保存到服务器上

Question

我想拍张照片，把它发送到服务器，然后保存到磁盘上

获取照片为水滴的JavaScript函数：

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发布到服务器并写入其中的文件