web-dev-qa-db-ja.com

Blobを画像URLに変換し、画像srcで使用して画像を表示する

Blobをbase64/imageに変換する方法は？
API呼び出しを通じてこのblobを取得しており、それを
画像。私はstackoverflowの答えで試しましたが、何も助けにはなりません
私はこれを試しました。

//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">

何も見落としました。提案してください

angulartypescriptblobazure-storage-blobsfilereader
5
pjay

Base64文字列を生成します。

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

それができたら、イメージに入れる文字列を生成しますsrc with Angular sanitizer。例：

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

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

タイプを変更できます'data:image/png;base64,'必要に応じて。

そして最後に、これをあなたのイメージに入れてください：

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

この行は私にとっては正しく機能し、完全にはテストしていません。また、セキュリティの問題やその他のことについては知りませんが、正しいようです。

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

そしてhtmlで

<img [src]="ImageSource" />

更新1：

セキュリティ上の問題、安全でないURLに関するブラウザの例外があります

更新2

問題は解決しました、私の問題はBlobの情報が重複していたため、不要なテキストを削除しました（mimeを正しく設定したため、その情報はすでにそこにあったと思います）]

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