如何在 Javascript 中從 responseText 在 HTML 中設置 img.src？

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以顯示下載的圖像。 但我得到了錯誤，

未捕獲的 DOMException：無法在“Window”上執行“btoa”：要編碼的字符串包含超出 Latin1 范圍的字符。 在 XMLHttpRequest.downloadCompleted

然后我按照這個答案使用了下面的代碼。

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

錯誤消失了。 但是img仍然是空格。 我該如何解決？ 提前致謝...

更新：我使用了這個鏈接。 它拋出以下錯誤，

CORS 策略已阻止在“ https://cdn.dribbble.com/users/93493/screenshots/1445193/notfound.png ”處訪問 XMLHttpRequest 源“null”：沒有“Access-Control-Allow-Origin”標頭存在於請求的資源上。

我也使用了這個鏈接，沒有任何錯誤但是我得到了相同的空白區域而不是圖像。

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