Tainted canvases may not be exported

오류 :

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

 

해당원인이 발생한 이유는 "Anonymous" 문제가 발생해서이다.

내부에서 개발을 하다 보니 내부 이미지 URL을 쓰면서, 해당문제가 되었습니다.

 

해결방법

 

1. 외부이미지 사용

 : 이미지를 내부에서 외부의 이미지로 옮긴 다음 외부 이미지로 작성을 하면 됩니다.

// 기존
img.src = "./img/이미지.jpg"; 

// 변경
img.src = "www.domain.com\이미지.jpg"

 

 

2. 다운로드에 img.crossOrigin = 'Anonymous' 항목을 추가하여 줍니다.

 

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
 
var img = new Image;
img.src = 'imgUrl.png';
img.crossOrigin = 'Anonymous'; // 추가
img.onload = function() {
    canvas.width = this.width;
    canvas.height = this.height;
    ctx.drawImage(img, 0, 0);
    console.log(canvas.toDataURL());
}