web-dev-qa-db-fra.com

Convertir Blob en url d'image et utiliser dans src d'image pour afficher l'image

Comment convertir un blob en base64/image?
Je reçois cet objet blob via un appel API et j'essaie de l'afficher dans un
image. J'ai essayé avec des réponses stackoverflow mais rien ne pouvait aider
Je viens d'essayer ça.

//Angular 5 code  
imageSrc;//global variable  
data = [{"image_blob":{"type":"img/jpg","data":[123,125]}}];//from api  
var blob1 = new Blob([new Uint8Array(data[0].image_blob.data)]);  
const imageUrl = URL.createObjectURL(blob1);  
console.log(imageUrl);//blob:http://localhost:8100/c489.etc  
this.imageSrc = imageUrl;  

<!-- html code -->  
<img [src]='imageSrc' alt="image">

J'ai raté quelque chose. Veuillez suggérer

angulartypescriptblobazure-storage-blobsfilereader
5
pjay

Générez la chaîne base64:

var reader = new FileReader();
reader.readAsDataURL(blob); 
reader.onloadend = function() {
   base64data = reader.result;     
}

Une fois que vous l'avez, générez la chaîne que vous mettrez dans votre image src avec Angular sanitizer. Exemple:

import { DomSanitizer } from '@angular/platform-browser';
constructor( ... private sanitizer : DomSanitizer ...){}

public myFunction() : void {
    let mySrc = this.sanitizer.bypassSecurityTrustUrl('data:image/png;base64,' + base64data);
}

Vous pouvez modifier le type 'data:image/png;base64,' Comme vous le souhaitez.

Et pour finir, mettez ceci à votre image:

<img [src]="mySrc" />
2
Powkachu

cette ligne fonctionne correctement pour moi, je n'ai pas testé complètement et je ne connais pas les problèmes de sécurité ou tout autre truc, mais cela semble juste:

this.ImageSource = window.URL.createObjectURL(blob);

et en html

<img [src]="ImageSource" />

Mise à jour 1:

Il y a un problème de sécurité, une exception de navigateur concernant une URL non sécurisée

mise à jour 2

problème résolu, mon problème était, des informations en double pour Blob, donc juste, supprimé le texte inutile, (je pense que parce que j'avais correctement défini le mime, ces informations étaient déjà là)]

var result = (<any>e.srcElement).result;
  //this.Content = this.sanitizer.bypassSecurityTrustUrl('data:image/' + this.File.FileType + ';base64,' + result);
  this.Content = this.sanitizer.bypassSecurityTrustUrl(result);
0
Amirreza