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

12 浏览
0 Comments

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

我想在JavaScript中将浏览器中的捕获照片上传到Node.js服务器的画布中，但我找不到合适的方法。请帮忙，非常感谢。

这段代码可以成功下载捕获的图像，但我找不到上传相同图像到Node服务器的方法。

0

2 答案

0 Comments

问题的原因是要将从浏览器的画布中捕获的照片上传到Node服务器，需要将数据URL转换为可上传的格式。解决方法有两种：

1. 客户端解析：在客户端解析数据URL，然后使用xhr请求将解析后的结果发送到Node服务器。

2. 服务器端解析：直接使用xhr请求将数据URL字符串发送到Node服务器，然后在服务器端使用类似"data-url-parser"的工具解析。

希望这些方法能帮助你朝着正确的方向解决问题。

0
0 Comments

问题的原因是用户想要将通过浏览器中的画布捕获的照片上传到Node服务器。为了解决这个问题，用户需要在客户端和服务器端分别编写代码。

在客户端，用户可以使用以下代码将图片转换为Base64格式并将其发送到服务器：

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 () {
            post = JSON.parse(body);
            var data = post.replace(/^data:image\/\w+;base64,/, "");
            var buf = Buffer.from(data, 'base64');
            writeFileToSystem(buf);
        });
    }
    function writeFileToSystem(buf)
    {
        fs.writeFile("images/image.png", buf, function(err) {
            console.log("The file was saved!");
        });
    }
}

通过以上代码，用户可以在客户端将捕获的照片转换为Base64格式并发送到服务器，然后服务器将接收到的数据解析并保存为图片文件。这样，用户就成功地将从浏览器画布中捕获的照片上传到了Node服务器上。

0