将base64图像数据客户端保存到Nodejs服务器答案

【问题标题】：save base64 image data client to Nodejs server将base64图像数据客户端保存到Nodejs服务器
【发布时间】：2020-10-09 22:25:34
【问题描述】：

我创建了一个基于 Canvas 的应用程序，用户可以在其中进行自定义设计并上传到服务器，我想将 blob 对象发送到服务器，然后再次将其更改为 base64 数据并在服务器上创建图像。

首先我尝试通过在客户端代码中创建 base64 图像数据的 blob 来发送它

 import b64toBlob from 'b64-to-blob';

postData(_canvasData){
    var contentType = 'image/png';
    var imgData = _canvasData.replace(/^data:image\/[a-z]+;base64,/, "");
    var blob = b64toBlob(imgData, contentType);

   axios.post('/facedata/'+imgData)
.then(function(res){
    console.log(res)
}).catch(function(err){
    console.log(err,"<<<error")
})
    
}
    

function dataURItoBlob(dataURI, callback) {
var byteString = atob(dataURI.split(',')[1]);
    
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    var bb = new Blob([ab]);
    return bb;
    };

我的 NodeJS 服务器代码

var blobToBase64 = require('blob-to-base64');
var FileReader = require('filereader')

app.post("/facedata/:canvasData",function(req,res){
  //req.params.canvasData returning blob object

 //This shows error unable to read object blob
 var reader = new FileReader();
    reader.addEventListener('load',function(ev){
        console.log("dataUrlSize:", ev.target.result.length);
    })        
    reader.readAsDataURL(blob);

//This Shows Error window not found

   blobToBase64(blob,function(error,data){
    console.log(data,"<base64Data");
})
}

【问题讨论】：

如果你看一下blobToBase64的源码（全20行），应该清楚它不会在浏览器之外运行：github.com/tiaanduplessis/blob-to-base64/blob/master/src/…

标签： node.js blob

【解决方案1】：

尝试使用这种方法解决您的问题：

假设你的画布看起来像这样：

<canvas id="myCanvas"></canvas>

将画布图像转换为 dataURL (base64)
```
 var dataURL = canvas.toDataURL(); 
```

使用 AJAX 请求将数据发送到所需路由

 $.ajax({
      type: "POST",
      url: "/facedata",
      data: { 
           imgBase64: dataURL
      }
  }).done(function(o) {
         console.log('saved'); 

    });

在你的 NodeJS 路由中，做这样的事情。此代码会将接收到的图像保存在您的服务器上：-

    router.post('/facedata', function(req, res) {
        var base64Data = req.body.imgBase64.replace(/^data:image\/png;base64,/, "");
        fs.writeFile(<path-to-file>.png, base64Data, 'base64', function(err) {
            if(err){
               console.log(err);
             }
        });

【讨论】：