Как установить img.sr c в HTML из responseText в Javascript?

Question

Я следовал , этот ответ и загрузка файла прошла успешно. Проблема заключается в том, чтобы установить загруженный файл изображения в тег img.src.

Ссылка на изображение: https://images.pexels.com/photos/853199/pexels-photo-853199.jpeg?crop=entropy&cs=srgb&dl=aerial-view-of-seashore-near-large-grey-rocks-853199.jpg&fit=crop&fm=jpg&h=4000&w=6000

Код:

function onReadyState(e){

    let r = e.target;
    if(r.readyState != 4 || r.status != 200){
        return
    }
    console.log(r)
    let img = document.getElementById('downloaded-img')
    let base64  = btoa(r.response)
    img.src = 'data:image/jpg;base64,'+base64
}

Я пытался преобразовать responseText в base64, чтобы установить img.scr для отображения загруженного изображения. Но я получил ошибку,

Uncaught DOMException: Не удалось выполнить 'btoa' в 'Window': строка для кодирования содержит символы вне диапазона Latin1. at XMLHttpRequest.downloadCompleted

Затем я использовал следующий код, следуя этот ответ.

   let base64  = btoa(unescape(encodeURIComponent(r.responseText)))

Ошибка исчезла. Но img - это еще пробел. Как я могу решить это? Заранее спасибо ...

Обновление: Я использовал эту ссылку. Выдает ошибку ниже,

Доступ к XMLHttpRequest в 'https://cdn.dribbble.com/users/93493/screenshots/1445193/notfound.png' из источника 'null' был заблокирован политикой CORS: No 'Access-Control-Allow-Origin 'Заголовок присутствует на запрошенном ресурсе.

Я тоже использовал эту ссылку, ошибки не возникло, но вместо изображения появилась та же пустая область.

Answer 1

btoa получить строку в качестве аргумента, но у вас есть поток. Вы можете использовать URL.createObjectURL для получения URL-адреса BLOB-объекта

const url = 'https://images.pexels.com/photos/853199/pexels-photo-853199.jpeg?crop=entropy&cs=srgb&dl=aerial-view-of-seashore-near-large-grey-rocks-853199.jpg&fit=crop&fm=jpg&h=4000&w=6000';
const img = document.querySelector('img');

fetch(url).then(data => data.blob()).then(blob => {
    const src = URL.createObjectURL(blob);
    img.src = src;
}).catch(err => console.log(err));

<img height="150"/>

Для загрузки изображения с URL:

var a = document.createElement('a');
a.href='https://images.pexels.com/photos/853199/pexels-photo-853199.jpeg?crop=entropy&cs=srgb&dl=aerial-view-of-seashore-near-large-grey-rocks-853199.jpg&fit=crop&fm=jpg&h=4000&w=6000';
a.download='filname.jpg';
document.body.appendChild(a);
a.click();
a.remove()

Answer 2

Один длинный путь - это использовать FileReader, предполагая, что вы получили данные в виде BLOB-объектов, поэтому это должно работать (надеюсь):

xml = new XMLHttpRequest()
xml.open("GET", "YOUR URL", true)
xml.responseType = "blob"
var blob
xml.onload = function(e){blob = xml.response;}
file = new FileReader()
var base64
file.onloadend = function() {base64 = file.result}
file.readAsDataURL(blob)
img = document.getElementById('downloaded-img')
img.src = base64