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

Posted 2023-02-24

【中文标题】如何将捕获的照片（从浏览器 - 画布）上传到节点服务器？

【英文标题】：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 调用来发布您的数据

【参考方案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 之类的内容对其进行解析

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