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

生成base64字符串：

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

一旦有了它，就可以使用Angular消毒剂生成要放入图像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

此行对我来说正常工作，我还没有完全测试过，也不知道安全问题或其他任何内容，但这似乎是正确的：

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 3

当尝试从服务器响应中将图像加载为Blob时，我遇到了Angular2（7）认为提供的URL不安全的问题。在寻找解决方案时，广泛建议的解决方案是使用DomSanitizer绕过安全性。

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

在the angular documentation page for DomSanitizer上，他们写了以下内容：

bypassSecurityTrustUrl（）

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

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

将blob（图像）转换为数据URL（base64字符串）并将其设置为图像元素的src更好，更安全。

Data URLs are generally considered safe (MDN)：

将数据编码为base64格式

base64字符串通常是网址安全的，这就是为什么可以将它们用于在数据URL中编码数据的原因。

the blog post here中甚至在@Powkachu的其他答案中也建议使用此解决方案，但是在该答案中，错误是将base64协议标识符加了双（the FileReader::readAsDataURL already returns this in the result）并不必要地传递给消毒剂中的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字符串），现在可以立即将其设置为image src。

Here a fiddle in plain Javascript来演示没有Angular的解决方案的工作原理。

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();
    }

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

希望这对您有用

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

4 个答案: