javascript - 如何从 Javascript 中的 responseText 设置 HTML 中的 img.src？

Question

我关注了this答案&文件下载成功。面临的问题是将下载的图像文件设置到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: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range. at XMLHttpRequest.downloadCompleted

然后我按照 this 使用了下面的代码回答。

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

错误消失了。但是 img 仍然是空白。我该如何解决？提前致谢...

更新: 我用了this关联。它抛出以下错误，

Access to XMLHttpRequest at 'https://cdn.dribbble.com/users/93493/screenshots/1445193/notfound.png' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我用了this也有链接，没有任何错误但是我有相同的空白区域而不是图像。

Answer 1

btoa 接收一个字符串作为参数，但您有一个流。您可以使用 URL.createObjectURL 获取 blob url

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