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
There is no error in my code.
Anyone have a solution?
Thanks in advance