如何在 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 以显示下载的图像。但我得到了错误，

未捕获的 DOMException：无法在“窗口”上执行“btoa”： 要编码的字符串包含 Latin1 范围之外的字符。 在 XMLHttpRequest.downloadCompleted

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

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

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

更新： 我使用了this 链接。它抛出以下错误，

访问 XMLHttpRequest 在 'https://cdn.dribbble.com/users/93493/screenshots/1445193/notfound.png' 来自原点“null”已被 CORS 策略阻止：否 请求中存在“Access-Control-Allow-Origin”标头 资源。

我也使用了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()

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