如何将捕获的照片（从浏览器 - 画布）上传到节点服务器？答案

【问题标题】：How to upload captured photo (from browser - canvas) to node server?如何将捕获的照片（从浏览器 - 画布）上传到节点服务器？
【发布时间】：2019-11-28 07:48:05
【问题描述】：

我想将在画布中捕获的照片从浏览器中的 javascript 上传到 nodejs 服务器。我没有得到正确的方法。请帮忙。非常感谢。

(function(){
  var video=document.getElementById('video'), 
  canvas = document.getElementById('canvas'),
  vendorUrl = window.URL || window.webkitURL;
  context = canvas.getContext('2d');
  //photo = document.getElementById('photo');
  navigator.getMedia = navigator.getUserMedia ||
                       navigator.webkitGetUserMedia ||
                       navigator.mozGetUserMedia ||
                       navigator.msGetUserMedia;
  navigator.getMedia({
       video: true,
       audio: false
  }, function(stream){
      video.srcObject=stream;
      video.play();
  }, function(error){

  });
  document.getElementById('capture').addEventListener('click',function(){
        context.drawImage(video,0,0,400,300);
    //    photo.setAttribute('src',canvas.toDataURL('image/png')); 
       download();
   });
})();
function download() {
var download = document.getElementById("capture");
var image = document.getElementById("canvas").toDataURL("image/png")
    .replace("image/png", "image/octet-stream");
download.setAttribute("href", image);
//download.setAttribute("download","archive.png");
}

此代码可以正常下载捕获的图像，但我无法将相同的图像上传到节点服务器。

【问题讨论】：

How to upload, display and save images using node.js and express的可能重复
@rebecca 有点不同，Sneha 想从画布中获取数据，然后发送该数据（我认为没有上传按钮）
啊，你是对的，对不起。但是：@Sneha 我认为您可以创建一个空的Formdata 对象，将您的图像附加到它，然后使用类似于here 的ajax 调用来发布您的数据

标签： javascript node.js npm

【解决方案1】：

这是答案代码。

在客户端

function covertImage() {
var image = document.getElementById("canvas").toDataURL("image/png");
sendMessage(image);
}

//Sending image data to server
function sendMessage(image){
   var msg = JSON.stringify(image);
   var xhr = new XMLHttpRequest();
   xhr.open('POST', true);
   xhr.send(msg);
   alert('file is saved');
}

在服务器端

http.createServer(function (request, response) {
    var post='';
    if (request.method == 'POST') {
        var body = '';
        request.on('data', function (data) {
            body += data;
        });
        request.on('end', function () {
//-------------parsing data from json to string-------------------------
            post = JSON.parse(body);
            var data = post.replace(/^data:image\/\w+;base64,/, "");
            var buf = Buffer.from(data, 'base64');
            writeFileToSystem(buf);
        });
    }

//----------saving image to server side folder------------------
    function writeFileToSystem(buf)
    {
        fs.writeFile("images/image.png", buf, function(err) {
            console.log("The file was saved!");
        });
    }

}

【讨论】：

【解决方案2】：

DataURL 是一个具有内容类型的字符串，并且（通常）是一个 base64 编码的数据字符串，看起来像这样：

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z

所以你可以用这个做两件事：

您可以决定由客户端解析它，并将解析结果发送到您的 nodejs 服务器，并使用 xhr request
您可以使用xhr request 立即发送字符串，并在您的服务器端使用data-url-parser 之类的内容对其进行解析

希望这可以帮助您找到正确的方向

【讨论】：