是否可以将 src img 属性指向 blob 文件或 base64 编码的图像?

Question

我想知道我是否可以以某种方式获取 url 的图像内容并将其转换为 base64 或 blob 文件并将其附加到 src 属性？

如果这是可能的，我怎么能以有角度的方式做到这一点？我试图做这样的事情，但它不起作用

const fileReader = new FileReader();
let userAvatar: string;
this.avatarSubject = new BehaviorSubject(this.userService.getAvatar(this.channelId));
this.avatarSubject.subscribe(res => {
userAvatar = res;
const binaryImg = atob(userAvatar);
const length = binaryImg.length;
const buffer = new ArrayBuffer(length);
const uint = new Uint8Array(buffer);
const blob = new Blob([uint], {type: 'image/jpeg'});
fileReader.readAsDataURL(blob);
}).unsubscribe();

Answer 1

您可以将图像 src 设置为 Base64 dataURI，而不是 blob。

可以将图像作为 blob 检索，然后将其转换为 dataURI(如果它不违反任何 cors 策略(。

(async ()=>{
var url = 'https://imgur.com/gallery/rh5O7wN';
var blob = await urlToBlob(url);
var datauri = await blobToDataURI(blob);
document.getElementById('img').src = datauri;
})();
function urlToBlob(url) {
return new Promise(done => {
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = 'arraybuffer';
xhr.addEventListener('load', function() {
if (xhr.status === 200) done(new Blob([xhr.response]));
})
xhr.send();
});
}
function blobToDataURI(blob) {
return new Promise(done => {
var a = new FileReader();
a.onload = e => done(e.target.result);
a.readAsDataURL(blob);
});
}