[JavaScript] Tainted canvases may not be exported 해결

JavaScript 오류Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 해결방법입니다.

 

 

Solution

img.crossOrigin = 'Anonymous';

외부 이미지의 cross origin문제로 위 오류가 생겼기 때문에, image의 crossOrigin값을 설정해주면 됩니다,

 

따라서 아래처럼 코드를 완성할 수 있습니다.

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
 
var img = new Image;
img.src = 'https://jeroen.github.io/images/testocr.png';
img.crossOrigin = 'Anonymous';
img.onload = function() {
    canvas.width = this.width;
    canvas.height = this.height;
    ctx.drawImage(img, 0, 0);
    console.log(canvas.toDataURL());
}