[html2Canvas] Unable to get image data from canvas because the canvas has been tainted by cross-origin data 오류 / safari에서 이미지를 제대로 호출하지 못 할 때

 

 

‼️ 문제상황

canvas를 사용해서 이미지를 그리고 그려진 이미지를 캡쳐하는 작업을 하는데, 웹상에서 크롬으로 개발할 때는 잘 되는데, 배포 후에 ios 사파리에서 테스트하면 모든것이 하얗게 나오는 현상이 발생했다. 그리고 등장하는 오류 메세지

Unable to get image data from canvas because the canvas has been tainted by cross-origin data

 

CORS 오류가 나는 것이다. 이미지 도메인과의 문제가 발생하는 듯 했다. 

html2Canvas 옵션도 더해보고 이리저리 찾아보다 찾은 해결책은!!!!!

 

 

 

✅ Solution

var url = 'http://url';
var imgObj = new Image();
imgObj.src = url + blar blar 
imgObj.crossOrigin = "anonymous"

 

img.crossOrigin : "Anonymous" 로 지정해주는 것. 

아래의 스택오버플로우를 참조하면 된다. 

 

- https://stackoverflow.com/questions/22097747/how-to-fix-getimagedata-error-the-canvas-has-been-tainted-by-cross-origin-data

How to fix getImageData() error The canvas has been tainted by cross-origin data?