nodejs - how to convert base64 image to image object

user_10686620 0
Viewed 207

In frontend, I am using React. The input accept the image file

...
  onImageChange = event => {
    if (event.target.files && event.target.files[0]) {
      let img = event.target.files[0]; //This is the image object
      //Then convert img to base64
    }
  };
...
<input type="file" name="myImage" onChange={this.onImageChange} /> //accpet image file

CodeSandbox: https://codesandbox.io/s/gallant-almeida-z6d1x?file=/src/App.js

The image Object will like this enter image description here

In backend, I am using node.js
Frontend will send api request to backend with the base64 as the parameter,
is it possible to convert it back to image object in backend?

reactjs node.js
1 Answers

You can use a function to convert Base64 data uri to a File object.

    // Function return a promise with File object
    function urltoFile(url, filename, mimeType){
        return (fetch(url)
            .then(function(res){return res.arrayBuffer();})
            .then(function(buf){return new File([buf], filename,{type:mimeType});})
        );
    }
    
    let base64image = 'iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAhGVYSWZNTQAqAAAACAAFARIAAwAAAAEAAQAAARoABQAAAAEAAABKARsABQAAAAEAAABSASgAAwAAAAEAAgAAh2kABAAAAAEAAABaAAAAAAAAAEgAAAABAAAASAAAAAEAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAFKADAAQAAAABAAAAFAAAAABB553+AAAACXBIWXMAAAsTAAALEwEAmpwYAAABWWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgpMwidZAAACyklEQVQ4EY1US2tTQRSe3DxL2lAkD0rTGmOT5t1FVg1E0hIK3bcboe58rQVXXfRvRKkgihv9CxqEbLPrpgt110XqKkHzJNfvO869vYmheGCYM3POfHPmzHeOUjfigurm8uzszLO1tfU8Fou1IpFIZ2Njw+SgHo1GW7TRRx/lGZ4VsRQDK5OjUCicdDqd19CngUDgo9frbXa73W/0DgaD98fj8R7GkWmablz4+OLi4h1MxOGYYtygJ5PJN+Fw2EylUqeIgJcsFIAZ9EHEJs9oJwtUSeg00KFWqxUcKN58Pu9zrHnIXh8cHBTmQCVlamdn52QOLICD9o27u7t3isXiw8PDwxDBdfT0URYoU8W1ajQaXoANtre3T2VDKXGkXi6XvZyz2ezLUChk5nK5p8596OLL5+OzBvJRWDxDcn87csbILJE8ViqVu5lM5kW1Wl3TBstH7MwpAH/x9xWpsbm5+VY72vmxEPXsX11dfQB9kV1eQQxiGUBPG4bxRR+Ub3eASZJ9Pl8K1Pnq9/vvaZvNAKRFtoDRnE6naQ+cI8Ph8Lt2JBedIuvRaDTB5gB+nGdkZWVFfIgB3kYMl0vSYeVkxnluMVMRczZZEssA8k/HU24DXmjr9XqyD4xkv9+/ZoSXePu+vtHOzaIIFu21223ZBsae2+2+NMCv94jyWNNmBOuiSJinMcZ8juk7Jm0Gg8HR8vLyB9VsNj0gdp/khJFiExv631JSKg+dYGkMivUSm9gsDiE2raVS6RGbgqOO6cjbJVrY1tbX1xvgWZT++jUC9k/pwX5rc4CdxLXSwMhsctfr9SJ7QCKROMc+RV5kR4KOc/4/7YsRsvbnwATHutmaTXaeq6urV2C+CSp8wvwZn/ZjMpmYS0tLSXzAPoh+jF91IQVPdINldIx+ptIIKs9ncnXTaKHor9n+4/G4Cb3DeqWNXYooEJ6xAlJ/AH2088vCD+ZKAAAAAElFTkSuQmCC';
    
    urltoFile('data:text/plain;base64,' + base64image, 'hello.png','image/png')
    .then(function(file){ console.log(file);});

user_43155240
Related