将 Blob 转换为图像 url 并在图像 src 中使用来显示图像

Question

如何将blob转换为base64/图像？
我通过 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">  

错过了什么。请推荐

Answer 1

生成base64字符串：

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

获得后，使用 Angular sanitizer 生成要放入图像中的字符串

src

。示例：

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

Answer 2

当尝试从服务器响应中将图像作为 blob 加载时，我遇到了 Angular2 (7) 认为提供的 url 不安全的问题。在寻找解决方案时，广泛建议的解决方案是使用

DomSanitizer

绕过安全性。

请参阅此处 @Amirreza 的示例，但在其他 StackOverflow 帖子中也建议了相同的解决方案。

在

DomSanitizer

的角度文档页面上，他们写了以下内容：

绕过SecurityTrustUrl()

警告：使用不受信任的用户数据调用此方法会使您的应用程序面临 XSS 安全风险！

在我看来，这样做并不安全，除非您真的确定图像来源可以信任！
您应该考虑到，即使源来自您自己的服务器，它也可能是由用户上传的，并且可以通过上传恶意图像来利用此类解决方案。

将 blob（图像）转换为 data-url（base64 字符串）并将其设置为图像元素的

src

会更好、更安全。

数据 URL 通常被认为是安全的 (MDN):

将数据编码为base64格式

base64 字符串通常是 url 安全的，这就是它们可用于在数据 URL 中对数据进行编码的原因。

这里的博客文章甚至在@Powkachu的其他答案中也建议了这个解决方案，但在该答案中错误是base64协议标识符添加了两倍（FileReader::readAsDataURL

已经在结果中返回了这个） 

）并不必要地从消毒剂传递到bypassSecurityTrustUrl

。

正确、安全且更简单的解决方案如下所示：

let mySrc;
const reader = new FileReader();
reader.readAsDataURL(blob); 
reader.onloadend = function() {
   // result includes identifier 'data:image/png;base64,' plus the base64 data
   mySrc = reader.result;     
}

其中 blob 是

Blob

，

mySrc

 是 dataUrl（base64 字符串），现在可以立即将其设置为图像 src：

<img [src]="mySrc" />

---

这里用纯 Javascript 来演示这个解决方案在没有 Angular 的情况下的工作原理。

Answer 3

这条线对我来说是正确的，我还没有完全测试过，也不知道安全问题或任何其他东西，但它似乎是正确的：

this.ImageSource = window.URL.createObjectURL(blob); 在 html 中

<img [src]="ImageSource" />

更新1：

它有安全问题，浏览器关于不安全网址的异常

更新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);

Answer 4

对我有用的是这个

let blob = new Blob([response] );
                this.srcImage = this._sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(blob));

我使用相同的原理从 blob 下载文件，并且运行良好。

downloadFileView(data, fileName) {
        let blob:any = new Blob([data] );
        const url= window.URL.createObjectURL(blob);
        let a = document.createElement('a');
        a.href = url;
        a.download = fileName;
        a.click();
        window.URL.revokeObjectURL(url);
        a.remove();
    }

如果您想查看图像并避免浏览器的警告，消毒服务非常重要。

希望这对你有用

Answer 5

谢谢大家！ 我只是想分享我的最终解决方案（我现在使用 Angular 17）

后端服务：

const url = this.url + "/images/" + picturetype + "/" + Id;
    let options = {
    headers: this.getHeaders(),
    responseType: "blob" as "json"
  };
  return this.httpClient.get<Blob>(url, options).pipe(
   map(response => {
    console.log("respons" , response);
    
    let dataType = response.type;
    let binaryData = [];
    binaryData.push(response);
    let result: [any[], string] = [binaryData, dataType]
    console.log("result" , result);
    return new Ok(result);
   
  }),
  catchError(error => of(new Err<[any[], string]>(error)))

ts：

   this.backendService.getPicture(picturetype,Id).subscribe((result) => {
   if (result.isErr()) {
     console.error(result.unwrapErr());
     return;
   }
   let response = result.unwrap();
   let data = response[0];
   let dataType = response[1]; 
      
   // this is the magic line!!!
    this.mySrc = 
    this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(new 
    Blob(data, { type: dataType })));  
    
   });

html:

[src]="this.mySrc"