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

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来存储图像，服务器代码：

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

我试图安慰.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);