如何将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">
什么都错过了。请建议
答案 0 :(得分:4)
生成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" />
答案 1 :(得分:0)
此行对我来说正常工作,我还没有完全测试过,也不知道安全问题或其他任何内容,但这似乎是正确的:
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);
答案 2 :(得分:0)
当尝试从服务器响应中将图像加载为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的解决方案的工作原理。
答案 3 :(得分:0)
对我有用的是这个
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服务非常重要。
希望这对您有用