getImageData() 오류, 왜 발생할까요?
캔버스(Canvas)에서 getImageData()를 호출할 때 '캔버스가 교차 출처(cross-origin) 데이터에 의해 오염되었습니다'라는 오류가 발생하는 경우가 있습니다. 이는 보안 정책과 관련된 문제로, 원인을 이해하면 간단히 해결할 수 있습니다.
crossOrigin 속성이란?
crossOrigin 속성을 사용하면 외부 출처(도메인)에서 불러온 이미지를 마치 현재 사이트에서 로드한 것처럼 캔버스에서 사용할 수 있습니다.
반대로 CORS 승인 없이 다른 도메인의 이미지를 캔버스에 그리면 캔버스는 '오염(tainted)' 상태가 됩니다. 한 번 오염된 캔버스는 더 이상 내부 데이터를 꺼내올 수 없기 때문에 getImageData(), toDataURL() 같은 메서드 호출이 차단됩니다. 즉, 교차 출처 도메인의 이미지를 캔버스에 로드하는 순간 캔버스가 오염되는 것입니다.
해결 방법
이 문제는 다음과 같이 이미지에 crossOrigin 속성을 설정하여 예방할 수 있습니다.
img.crossOrigin = "Anonymous";
단, 이 방법이 작동하려면 원격 서버가 아래와 같은 CORS 응답 헤더를 적절히 설정하고 있어야 합니다.
Access-Control-Allow-Origin: *
정리
외부 이미지를 캔버스에서 사용하려면 img.crossOrigin = "Anonymous" 설정과 서버 측의 Access-Control-Allow-Origin 헤더가 모두 필요합니다. 두 조건이 충족되면 캔버스 오염 없이 getImageData()를 자유롭게 사용할 수 있습니다.