2

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?

CCCC
  • 5,665
  • 4
  • 41
  • 88
  • Does this answer your question? [convert base64 to image in javascript/jquery](https://stackoverflow.com/questions/21227078/convert-base64-to-image-in-javascript-jquery) – Robin Mollah Jun 16 '21 at 03:31
  • @Robin Mollah no, I want the image object instead of image url – CCCC Jun 16 '21 at 03:46
  • @Robin Mollah I updated the question – CCCC Jun 16 '21 at 03:50
  • Why would you convert the image to base64? – Brad Jun 16 '21 at 04:11
  • @Brad becos I want to upload it to server – CCCC Jun 16 '21 at 04:13
  • @CCCC Why not upload it to the server as binary? It's far more efficient that way. You won't have the ~33% size overhead, you'll save a lot of memory, you won't have the processing time of converting to base64, etc. – Brad Jun 16 '21 at 04:40

1 Answers1

-1

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);});
Robin Mollah
  • 116
  • 2
  • 8
  • Took help from this question: https://stackoverflow.com/questions/35940290/how-to-convert-base64-string-to-javascript-file-object-like-as-from-file-input-f – Robin Mollah Jun 16 '21 at 04:05