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?
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?