将canvas.toDataURL图像发送到nodejs

发布于 2025-01-11 05:06:49 字数 390 浏览 0 评论 0原文

我正在尝试将图像从前端脚本发送到我的服务器。

前端脚本：

var img_data = canvas.toDataURL('image/jpg'); // contains screenshot image
// Insert here POST request to send image to server

我试图接受后端的数据并将其存储到 req.files 中，以便能够像这样访问：

const get_image = (req, res) => {
    const File = req.files.File.tempFilePath;
}

我可以采取什么方式将图像发送到服务器并获取图像，如上面的例子？

原文

I'm trying to send image from front-end script to my server.

Front-end script:

var img_data = canvas.toDataURL('image/jpg'); // contains screenshot image
// Insert here POST request to send image to server

And I'm trying to accept the data in the backend and store it into req.files to be able to access like this:

const get_image = (req, res) => {
    const File = req.files.File.tempFilePath;
}

What way can I do to send the image to the server and get the image like in the example above?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

公布 2025-01-18 05:06:49

您的 img_data 是一个 Base 64 字符串，您可以在发布请求中直接将其发送到服务器，

例如

await fetch('/api/path', { method: 'POST', headers: { "content-type": "application/json"}, body: JSON.stringify({ file: img_data }) });

在后端，您可以将此字符串转换为二进制，然后保存到文件。

var fs = require('fs');

app.post('/api/path', async (req, res) => {
     const img = req.body.file;
     var regex = /^data:.+\/(.+);base64,(.*)$/;

     var matches = string.match(regex);
     var ext = matches[1];
     var data = matches[2];
     var buffer = Buffer.from(data, 'base64'); //file buffer
      
     .... //do whatever you want with the buffer

     fs.writeFileSync('imagename.' + ext, buffer); //if you do not need to save to file, you can skip this step.
     
     ....// return res to client


})

your img_data is a base 64 string, which you can send to server directly in a post request

e.g.

await fetch('/api/path', { method: 'POST', headers: { "content-type": "application/json"}, body: JSON.stringify({ file: img_data }) });

On your backend, you can convert this string to binary, and save to file.

var fs = require('fs');

app.post('/api/path', async (req, res) => {
     const img = req.body.file;
     var regex = /^data:.+\/(.+);base64,(.*)$/;

     var matches = string.match(regex);
     var ext = matches[1];
     var data = matches[2];
     var buffer = Buffer.from(data, 'base64'); //file buffer
      
     .... //do whatever you want with the buffer

     fs.writeFileSync('imagename.' + ext, buffer); //if you do not need to save to file, you can skip this step.
     
     ....// return res to client


})

回复收藏 0 原文

悲念泪 2025-01-18 05:06:49

您必须先将其转换为 Blob，然后将其附加到 Form。该表单将是您发送到服务器的请求的正文。

canvas.toBlob(function(blob){
    var form = new FormData(),
    request = new XMLHttpRequest();

    form.append("image", blob, "filename.png");
    request.open("POST", "/upload", true);
    request.send(form);
}, "image/png");

You have to convert it to a Blob first, and then append it to a Form. The form would be the body of the request that you send to server.

canvas.toBlob(function(blob){
    var form = new FormData(),
    request = new XMLHttpRequest();

    form.append("image", blob, "filename.png");
    request.open("POST", "/upload", true);
    request.send(form);
}, "image/png");

回复收藏 0 原文

~没有更多了~