Saving base64 image with Filesaver.js

Question

I am getting multiple Base64 URIs of JPG images.

I need to save them as jpg files.

I'm trying to use FileSaver.js, but its not working for me.

I have used filesaver.js before, when I was getting images from aws-sdk, in which, the data was in buffer form and it worked.

However, its not working for me with base64 string.

var base64 = '/9j/4AAQSkZJRgABAQAAAQABAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2ODApLCBxdWFsaXR5ID0gODUK/9sAQwAFAwQEBAMFBAQEBQUFBgcMCAcHBwcPCwsJDBEPEhIRDxERExYcFxMUGhURERghGBodHR8fHxMXIiQiHiQcHh8e/9sAQwEFBQUHBgcOCAgOHhQRFB4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4e/8AAEQgAYABgAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A+VFOG5HWvbP2bvB2keKNI8Y3194bXxFfaXa272Nk961srs7sGy4Zew7mvD1J4Oa9M+D/AI50TwzovifQvEOj3mpaf4gtoYZfslysMkfluWGCykc59O1ap6aGUkdj4l8Gw3XifT9GufDujfDhmt5JvNudWe6inAKgAkF9p64HfJrT8G/DLRf+Fj+GNK1DxTofiKx1C7eKe206eUOFWJ3yxKqQMqBwc1xK+MdG8O6tbar8MINb0G9WOSO4lvbqK53o23AUeWAOhz17V0Ph/wCNHilfGOg654r1GfW7XSbhp1ttkcZy0bJkFVHZu9dCc7aHO+VPU9O8I/CPwXefFDWP7Q0+WXwtPa2UmkQm4dSzXS7l+YHJ27JOprxDTvhpc6np6avfeI9D8PWN7fS2el/2nM6m7dG2tjYjbVBIBZsAGvX/AIffEfULrQfB1lLpJP8AYF81zO3m4a5QCRYVHHAUSt1JHA9eFj8M+Hdb8JaRo3ijRtVuYdEu7m4tPIuViyJZA8kMuVOVLfxDBx098JYjldpM2VJPVI8b13wXYaV8B9S1y9tVHiKx8YnSJJ0nLoI1tyzIMHaRuGd361m+BPDGi6r8EfiN4kvrVpNT0ZtO+wy+Yw8rzZmV+AcHIHfPtXrl/aaBY+AtX8La74Tu7rTbzXW1y1tNHvVhaD90IxGNysSo5x+FeYXPijSNE8KeOfBWgeGNUs7XxIbD7OLy9SV7cwOXfcQoB3Z4Has3UUtjRKx6L8Vfh5onhLSHm0j4Nx6ppkWjxXMusya7KjI7RZdvK8znaecAYNYfhxvhXefBrW/G0/woga40i9tbIw/25dATmQcuTn5fpg1x/wAWdbfx/wCK7fXBpFxZLFYW1o0LSq+/yowpII9Tn8Kj0fVL6y+EniLwMNDmaTVtRtryO4Eq7YlizlSOpJ4/Wpuijz++mt7jUbmeztRZ28kzPFbhy4iQnITceTgcZPJqxbEbxxRNpGoWygz2zoPenWwIcAitoNESKVtBPcyMkEZfapcgdgBkmtWVdIjt4orT7XPcFQZJHIRASOgXknB755p3hW1vZ4b57OZY9sTbx5e4suDx7VkwXPlXCSIudvUHvWSldjaPcb34UabdfCK38deGtXmnmUww3NnKo/1zMqMqnjGGYde3euV8GeHLm98Xf2LqNrLBPbyFJ45Bt2EdQc/yq3Y/Ee2tfh9ceH7PVb2za6uIppYEs43jLIyndvLbhjb0A5wK9QtLe1l8d6D4ng8UjXoNcSTfL9jSDDxhB8+3uM9/SpVWcYtPzE6alK56J4e8LaTbaSbTymWONefmxye9dXBo6TW5AJYMecj2quLq1bT1+z3Ec0Yw5ZccEEVuaJrWlyX76UtwGu1UNtwRwffGPwzXC7s32ON13R5LFWkt9Pt5QSPMbJ3lfY+vtXi/xa8KafeWM99bWrxzbdwaI4ZT784r6U8Z3+k6Zbquo31ramdtkQmlCl2xnAyeTXnN79nfQpn8xBukYMQ3UAnP6VcLx1Jep8ZRx6m8zRxTXbgDtIf8anhi1FWlJnn/AHX3lZz/AI11Hjyyg0i8uNRsNVlZJpCvlbQzxg84J3Zx74rkRqkiMwBY92zCM/nmuvfYgszCeEkXMLN77jVaFv3p+UgdqLi/uL5S5l2KCFKhcZ4PP6VHFITLubn3qouwMj0/VLnTre4S1dkaddpYdh3rNyc1IrokoEqloz1AOD9RWpp6+GhpFy95PqL6iYyII0iURK+eCzbskfhUJ2GzNkingCGaJ4w6hkLKRuX1HqK9k+C+oaLda/peixfao7e0ElyZX25mmK4bPPyrgDgenJpl58SPBF58GrXwte6LdT61a2bwQTtBGVjcsSGDE5A/CuO8OeP7vTdak1W5tIp5ioEaIoRFwNo4HYDsPSpbco7Bsz6vTUINO8R6Ra2sWNJ1KNo5Nyn5ZA4U4zzghkP4111/4VGm3F14gk1G5eQoFjjadvLiAPBVegPPX2H4/OPhzx9BrHxM0K2tZZY7N3aSaKU8K3ynI9CfLGQMCvc/iF4o1tNMg07RPDV1rETxB5bmK4SMRncRgbuGYY6f41hy62KvoXNf8Of8JJfy3E15cwXdjc74wCpRlZBtBDA9M54xXj3jhfEOoagujeHdLlksrLe4nQZZgJDG2c8DDL7/AHs8V6J4Y8Y649pqcviXQ76xbaT9qn2BCFHy428Dr75rzv4ffFGysdej+zW9zrE+6RLxWA8nym6lVHLBVbpxkjrWkUZvc4+b4aeNvG13CILe1SSC2ea5E8mwgo2wBgBwxIxjvg9K9A8B/s+WmmaM/wDwm/hi61nUjOsh+wamqRhCBiMg4JPUn+degfAXULvxZ498U3eh+IEk0uEW7ebJpoieWVy5cFSeoIPPvXO/GiLxxefHrRPB0GttDZXKLJHJBefYt2VbfnGSfuHpnJOKp81n5FLoeF/FnwHZ+Go5mtNNmsE/tR4CJLoS4G12CjvtA43HrzXl9u2GAznvXr3jyewbwlfxG8ubu+h8TLb3RuJGkICQyrgMeSOvNePcpclemDiqV7CKc5ww9aVMsQAma2fDMkMOro0zMuDkYjVv0bitXWNZmXQLLRYbgPbmWS6kj8lFKvvdV+YDJ4ycHjmgZg29mj48w4wfmAzkD8e1aUdrFGx8qNSy/dOM/rWdKzLH8uVOOh9PatHT9yxx4G95B8oHcntQJmes93p+oxX1rK0NxA4eN1PKsDkGvc/hj8efsF0qa3ILRGU+ZmAywM/94bfmjyeSAGGegFeR3+nXCTtb3NnNHOGKtE0ZVgR2INQv4X1bELR6Vfss+3y8wNh9xAXbxzkkAY65pSSe4Jnpfx3+K8HjWT7BZ380tjGmFitYmhikc/xMz4ZgP7u1a860dprZEuYm8t0wQR/Dj+Y9qu2HgzWzdfZm0a9S4O7EbQsGbaCTjI9AT+FXZtNuLK3UTWU8St3eMgdx3+hqvIRt/Dfx/wCJvCWpXEmmazJYx3bM0ojtUkVXOSCAR8o3DoOxr1nw7r2s+JfDx+K2q6TbeLPFdhdrHaxWVybeext4skExqrK+9mOBjJzx04+em2RTmJsmEKTjPXOML9OP51v+BfHev+ANdGveHbhY5hGUaKUExTKezLkcenfIz60mhmHruqandC7vNQWRZtQ1L+0XywDM7CTcc/UnsK5NpGkuWdizEnkk5Ndn4j8RRavHp1xdpCLlEmmn2xABnd2Y/wDoXFcYjK1yWGAGPAHamCLOm3DWeoeYsKyEDo2MAZ969V+E3wU1v4iOdXuruPSrGdyyZj3OwJzkDgAf5xXlVuIzqIWQMVYYIA619y/A+/jl0u1t4QEWOJcKPcVhVm47FxSe5i2f7I2hvpTQv4uvxMwO0m1jKg/TIz+dfNPj/wAHan8O/G954Xv5Umms3EkFwowssZ5VgD+o9QRX6NQPqeMpHC8WMgByG/z+NfH37ZOk+IbjxZZ64+gahHEkbxyXIi3xhdw2gsuQOM9aqErrUiWjPNW+JvjUAE6wHZE27mt4yfvbu6+/6Vnv4o1260uOxkvA0MSBExEmVAKkAHGRyi/lWEmJkyBwy49atWkTsq4/GtAsbb+K/EUiqbjWb13wQoMxPVSp+gwxH4+9Ran4r12+0+Szu9Snlt2AHlyNuUEE4wD0OSenrVGO0vDJJLHayy4wkYCE+pyfbr9cVDZWt3f6ha2lrGz3FxMsNshXBklZgAfYZNF0hWIbe0kurmeVV3xx4jBIOCR1P5n9Kg1KIxKwclpCMgZ6frwP8/T7C8H/ALLltBodvFrXiWRbjYDJHawAqrHr8xPzfXAzVvXv2W/CUtmBHr+rLcYxvcIyn8AAf1pX6lWPhqSC78gTOCIk+QcdSfT1qCzH7wevevS/jd8NdU+GurrGbwahYysfJuApQq3XDKSeffJ6V5xau005dgASe1NAi7Y3UVjqyyyR+YrKV2g45NfYnwMSWKFJFQsgiRTzjDAc18aT20lzqUEEJUO7fKT0r6++EGsJp+kJNICuY1MsTnaynHUZrCsVB2PozSpm8hfMdeemO1aEhSZfLnjSRCOQRmuH0jxfbXEYEEbu2Om3rWwmraiwyLE4PA5H+NREGU9U+F/w01K5N3e+FNK89jkukIjZvqVxmuZ+JnhzwR4T8K/bdK8M6VEsJPC2y4ZgCRnjnOMZNdPqN7qh3xGFIg4ALu4AUHr05zXC/FyDVfEPhw6Bod2Zb1po/MIjLqgx3x0A4PPYVomupLPN5vidbrBJb6daiBXiAtpY4VAilA3+WPbP6NXsPgLVIfGfg6EPaRPKMo7mIErKoDK2McMCQRXkug/s8+Iri/WXVtZdbc/M5tolUhyACw3f4V9H/D/wtpng/QYdK0uB0iTJd5W3O7HqzHuTQ9XoNGtpQ1Boka8QRHaCUBzg45rN8X6j9ltw6vt5A+tamoXwhjPzKfxrjPEkd3quzKJFbxyCSSQtkBVOePrj9aJNJWGj5Z/bM1z7RfW+neWeH3bvw/8Ar1876UMsT716l+1RrK6l48MCEYiTJx/tHj9MV5ho/Kk5zya22SRJ/9k='

saveAs(new Blob([base64], {type: "image/jpeg"}),"filename.jpg")

I have also tried:

saveAs(new Blob([base64], {type: "image/jpeg;base64"}),"filename.jpg")

saveAs(new Blob([atob(base64)], {type: "image/jpeg"}),"filename.jpg")

I have also tried using data:image/jpeg;base64, as a suffix to my base64 string.

The file gets saved, but images are corrupted. In some cases, the files just contain the base64 string. How do I save them as binary files?

Tusk

Answer 1

I used the code below to convert my Data URI to BLOB, then use it with FileSaver.js:

function dataURItoBlob(dataURI) {
  // convert base64 to raw binary data held in a string
  // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
  var byteString = atob(dataURI.split(',')[1]);

  // separate out the mime component
  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

  // write the bytes of the string to an ArrayBuffer
  var ab = new ArrayBuffer(byteString.length);

  // create a view into the buffer
  var ia = new Uint8Array(ab);

  // set the bytes of the buffer to the correct values
  for (var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
  }

  // write the ArrayBuffer to a blob, and you're done
  var blob = new Blob([ab], {type: mimeString});
  return blob;

}

I found this code at: Blob from DataURL?

Tusk

What's the point in the Uint8Array instance ia? You're not using it after creating it, unless the new Blob was meant to take in ia instead of ab? – Bracket

From the comments under the post I have mentioned, "ia is a view of the buffer. So when you set each byte in ia, it is writing into the buffer. Without the loop over ia the buffer will be completely empty" – Tusk

Ah OK that makes sense. I did wonder why ia isn't being passed into the new blob. – Bracket

So did I when I first saw it :) – Tusk

Answer 2

I had a similar issue with base64 pdfs, and I found this code on stackoverflow:

function b64toFile(b64Data, filename, contentType) {
    var sliceSize = 512;
    var byteCharacters = atob(b64Data);
    var byteArrays = [];

    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);
        var byteNumbers = new Array(slice.length);

        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }
        var byteArray = new Uint8Array(byteNumbers);
        byteArrays.push(byteArray);
    }
    var file = new File(byteArrays, filename, {type: contentType});
    return file;
}

This solved all my problems. Before, I was doing a similar method and my pdfs were all corrupted but after applying this code it worked. Hope it helps you. I am going to try to find the original answer where I found this code so that I can give proper credit.

Northwards

Answer 3

You can now use FileSaver to use URL of image to save. This works for b64.

import {saveAs} from "file-saver";
const b64 = "data:image/png;base64,iVBORw0KGgoAA...";
saveAs(b64, "image.png");

Arvizu