如何使用 toDataURL() 从网络摄像头画布将图像发布到服务器？ javascript答案

【问题标题】：How to post image to server from web camera canvas using toDataURL() ? javascript如何使用 toDataURL() 从网络摄像头画布将图像发布到服务器？ javascript
【发布时间】：2018-12-15 02:59:02
【问题描述】：

我想通过网络摄像头发送图像，然后发送到服务器以存储该图像。

function captureAndSendToServer() {
const player = document.getElementById('player')
const canvas = document.getElementById('canvas')
const context = canvas.getContext('2d')
context.drawImage(player, 0, 0, canvas.width, canvas.height)
var image = canvas.toDataURL("image/png")
// var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

axios
  .post('http://localhost:3000/sendImageToCloudinary', image)
  .then(response => {
  console.log(response)
})
}

我使用Cloudinary存储Image，服务器代码：

exports.sendImageToCloudinary = (req, res) => {
  console.log(req.body)
  cloudinary.v2.uploader.upload(req.body,
    function (error, result) {
      if (err) throw error
      console.log(result)
      res.json(result)
    })
}

错误是

PayloadTooLargeError: request entity too large

我已经尝试 console.log(image) 并输出了数十万字。

那么，这样做的正确方法是什么，谢谢，

【问题讨论】：

标签： javascript node.js image cloudinary

【解决方案1】：

您可以尝试以下方法-

    var file = <your_file>;

    var formdata = new FormData();

    formdata.append('file', file);
    formdata.append('cloud_name', '<cloud_name>');
    formdata.append('resource_type', 'image');
    formdata.append('upload_preset', '<upload_preset>');



    var xhr = new XMLHttpRequest();
    xhr.open('POST', "https://api.cloudinary.com/v1_1/<cloud_name>/image/upload",true);


    xhr.onload = function () {
    // do something to response
        //console.log(this.responseText);
    };

    xhr.send(formdata);

【讨论】：