Convert Image Base64 to Blob, Image didn't appear

@richiewijaya wrote:

Hi, so I create a service to convert Base64 to Blob, here the service

import { Injectable } from "@angular/core";

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

    getBlob (b64Data) {
        let contentType = 'image/png';
        let sliceSize = 512;

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

        let byteCharacters = atob(b64Data); //decode base64
        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;
    }
}

In my component page is like:

export class MyPage {

  constructor(public navCtrl: NavController, public navParams: NavParams, private imageHandler: ImageHandler) {
  }

  private data = '/9j/4AAQSkZJRgABAQIAHAAcAAD/7RmQUGhvdG9zaG9wI.... //Base64'
  private urlCreator = window.URL; //|| window.webkitURL.createObjectURL();
  private dataBlob = this.imageHandler.getBlob(this.data);
  private imageUrl = this.urlCreator.createObjectURL(this.dataBlob);

}

And I call in my HTML

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

But the result in my page using Ionic lab is only appear a caption “Image”, below the result

Blob - Ionic lab.png341x602 5.69 KB

There is no error in my code.
Anyone have a solution?

Thanks in advance

Posts: 1

Participants: 1

Read full topic