使用 JavaScript 在 base64 中下載和編碼圖像

Question

假設我有一個 URL。 我想：

1）下載並轉換為base64 2）將其上傳到某個鍵/值存儲（作為文本） 3）從鍵/值存儲（使用文本/純mimetype）下載它，從base64重新編碼，顯示它。

此致

Answer 1

如果有人還在搜索下載圖片並將其編碼為base64字符串，我最近發現這種outdated的方法但確實可靠。 優點是它是純 Javascript，因此無需安裝任何外部庫。 我之前嘗試過使用 fetch 和 axios，但由於某種原因，編碼的字符串格式不正確。

注意：如果您正在編碼此圖像以將其發送到 API，其中一些需要刪除前導數據類型，包括編碼字符串開頭的, 。

function toDataURL (url,  callback) {
    const xhRequest = new XMLHttpRequest()
    xhRequest.onload = function () {
        const reader = new FileReader()
        reader.onloadend = function () {
            callback(reader.result)
        }
        reader.readAsDataURL(xhRequest.response)
    }
    xhRequest.open('GET', url)
    xhRequest.responseType = 'blob'
    xhRequest.send()
}

const URL = "https://upload.wikimedia.org/wikipedia/commons/f/f7/Stack_Overflow_logo.png"
const logCallback = (base64image) => {
    // Base64 encoded string with leading data type like
    // data:image/png;base64,RAW_ENCODED_DATA______
    console.log(base64image)
}
toDataURL(URL, logCallback)