将Blob转换为图像URL，并在image src中使用以显示图像

Question

怎么把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">  

错过了什么。请建议

Answer 1

当尝试从服务器响应加载图像作为 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 是 aBlob并且mySrc是一个 dataUrl（base64 字符串），现在可以立即将其设置为图像 src：

<img [src]="mySrc" />

这里有一个纯 Javascript 的小提琴来演示这个没有 Angular 的解决方案的工作原理。

Answer 2

生成base64字符串：

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

有了它后，请src使用Angular消毒剂生成要放入图像中的字符串。例：

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