Как отправить изображение на сервер с холста веб-камеры с помощью toDataURL ()? Javascript

Question

Я хочу отправить изображение с захвата веб-камерой, а затем отправить на сервер для сохранения этого изображения.

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 (изображение), и это выводит сотни тысяч слов.

Итак, как правильно это сделать, спасибо,

Answer 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);