Javascript URL을 Base64 이미지로 변환

Question

이미지 URL을 base64 이미지로 변환하려고합니다. 나는 내가 사용하려고 시도하고있는 this을 발견했다.

나는 다음과 같은 코드가 있습니다

var imgUrl = 'https://www.google.de/images/srpr/logo11w.png'; 
let base64image = this.getBase64Image(imgUrl); 
console.log(base64image); 

및

public getBase64Image(imgUrl) { 
    var img = new Image(); 
    img.src = imgUrl; 
    var canvas = document.createElement("canvas"); 
    canvas.width = img.width; 
    canvas.height = img.height; 
    var ctx = canvas.getContext("2d"); 
    ctx.drawImage(img, 0, 0); 
    var dataURL = canvas.toDataURL("image/png"); 
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, ""); 
} 

그러나, 그것은 다음과 같은 출력을 :

data:,

I 얻을 콘솔에서 다음과 같은 오류 :

EXCEPTION: Uncaught (in promise): SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. Error: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

내 코드는 절대로 incoreect해야합니다. 누구든지 base64 이미지로 URL을 변환하는 방법을 조언 주실 수 있습니까?

감사

UPDATE

내가 함수에 다음 줄 aded :

:

img.crossOrigin = "Anonymous"; 

오류를 제거되었다, 그러나 지금은 다음과 같은 수

data:,

Answer 1

XHR과 Fil e Reader API 대신에 더 깨끗하지만 제한적으로 browser compatibility입니다. 콘솔에서 얻을 수있는 오류 메시지에

var imgxhr = new XMLHttpRequest(); 
    imgxhr.open("GET", url); 
    imgxhr.responseType = "blob"; 
    imgxhr.onload = function(){ 
     if (imgxhr.status===200){ 
      reader.readAsDataURL(imgxhr.response); 
     } 
     else if (imgxhr.status===404){ 
      // Error handle 
     } 
    }; 
var reader = new FileReader(); 
    reader.onloadend = function() { 
     console.log(reader.result.length); 
     // Code here 
    }; 
imgxhr.send();