Javascript：從圖片網址獲取Base64字符串

Question

假設我只有圖片的URL，並且我想從跨域腳本中獲取圖片的BAse64字符串值，而不使用DOM或Canvas或jQuery。 這可能嗎？...僅使用純Javascript？

Answer 1

如果圖像是跨域資源，則除非服務器使用適當的CORS標頭提供圖像，否則您將無法讀取該圖像。 瀏覽器從不允許腳本讀取跨域資源的內容（這是跨域策略的核心），除非跨域服務器通過CORS明確允許這樣做。

假設您確實有一個帶有適當CORS標頭的圖像（或者只是一個同源圖像），則可以將其作為Blob獲取（使用responseType ）並將其作為文件讀取以獲取base64編碼的data: URL：

var xhr = new XMLHttpRequest()
xhr.open("GET", "myimg.png");
xhr.responseType = "blob";
xhr.send();
xhr.addEventListener("load", function() {
    var reader = new FileReader();
    reader.readAsDataURL(xhr.response); 
    reader.addEventListener("loadend", function() {             
        console.log(reader.result);
    });
});