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

有什么遗漏的吗？请提供建议。

- pjay

---

可能是将Blob转换为Base64的重复问题。 - Powkachu

不，我也尝试过那段代码...但是没有成功。尝试了7天后才发布了问题。我也解决了Angular的安全性问题，为了简单起见，在这里没有提到。 - pjay

你的主要问题是什么？是获取base64还是将其放入HTML中？ - Powkachu

将其放入HTML中，无论如何我已经转换为ImageUrl。但是那并不起作用。 - pjay

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

- Powkachu

---

powkachu，谢谢你的回复，但我已经尝试了上述所有方法。事实上，我已经为净化创建了管道，但仍然没有效果。 - pjay

哦，真的吗，那很奇怪...图片没有显示吗？你检查过你的base64字符串是否生成正确了吗？ - Powkachu

Answer 2

尝试从服务器响应中以blob形式加载图像时，我遇到了一个问题：Angular2（7）认为提供的URL是不安全的。在寻找解决方案时，广泛建议使用DomSanitizer绕过安全性。例如@Amirreza的示例，但在其他StackOverflow帖子中也建议使用相同的解决方案。

在DomSanitizer的Angular文档页面上，他们写道：

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

对我来说，这似乎是不安全的，除非您确实非常确定图像源是可信的！您应该考虑即使源来自您自己的服务器，它也可能已被用户上传，并且通过上传恶意图像可以利用这种解决方案。

将blob（图像）转换为数据URL（base64字符串）并将其设置为图像元素的src比较好和更安全。 数据URL通常被认为是安全的（MDN）：

将数据编码为base64格式 base64字符串通常是url-safe的，这就是为什么它们可以用于在数据URL中编码数据的原因。

这个解决方案也在这篇博客文章和@Powkachu的另一个答案中提到过，但是那个答案中的错误在于添加了两次base64协议标识符(FileReader::readAsDataURL已经在结果中返回)，并且不必要地传递给了sanitizer的。

正确、安全且更简单的解决方案应该像这样：

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是一个数据URL（base64字符串），现在可以立即将其设置为图像的src属性：

<img [src]="mySrc" />

---

这里有一个使用纯JavaScript编写的小工具, 以演示此解决方案在没有Angular的情况下的工作原理。

- Wilt

---

感谢您的帮助。 - Dan Ortega

它解决了我的问题，我认为应该将其标记为正确答案。 - Oscar Cabrera Rodríguez

Answer 3

这行代码在我的环境下可以正常工作，但我没有完全测试过，并且也不知道安全问题或其他任何问题，但它看起来是正确的：

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

- Amirreza

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

清洁服务很重要，如果您想查看图片并避免浏览器的警告。

希望这对您有用

- Juan Sebastian Martinez