Javascript：從圖像URL獲取Base64字符串

Question

說我只有一個圖像的URL，我想從跨域腳本獲取它的BAse64字符串值，而不使用DOM或Canvas或jQuery。這可能嗎？...通過使用純Javascript？

Answer 1

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

假設你做有適當的CORS標頭（或只是同源圖像）的圖像，你可以提取圖片爲Blob（使用responseType），並把它讀作一個文件來獲取base64編碼data:網址：

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); 
    }); 
});