How to convert Base64 into an Image

Ionic Framework ionic-v3
4

You can create a blob from image an then show it in [src] bind, I created a service that work on blob

@Injectable()
export class ImageHandlerProvider {
    constructor () {
    }

    getBlob (b64Data) {
        contentType = '';
        sliceSize = 512;

        b64Data = b64Data.replace(/data\:image\/(jpeg|jpg|png)\;base64\,/gi, '');

        let byteCharacters = atob(b64Data);
        let byteArrays = [];

        for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
          let slice = byteCharacters.slice(offset, offset + sliceSize);
    
          let byteNumbers = new Array(slice.length);
          for (let i = 0; i < slice.length; i++) {
              byteNumbers[i] = slice.charCodeAt(i);
          }
    
          let byteArray = new Uint8Array(byteNumbers);
          byteArrays.push(byteArray);
        }

        let blob = new Blob(byteArrays, {type: contentType});
        return blob;
    }
}

and in you component you can use it like:

let urlCreator = window.URL || window.webkitURL;
let dataBlob = this.imageHandlerProvider.getBlob(data);
let imageUrl = urlCreator.createObjectURL(dataBlob);

this.imageUrl = imageUrl;

<img [src]="imageUrl" alt="Image" />

You can check this codepen for more details.