getImageData() 오류 문제 해결: 캔버스가 도메인 간 데이터로 오염되었습니다.

Question

내 코드는 localhost에서는 제대로 실행되지만 웹사이트에서는 실행되지 않습니다.

다음 줄 .getImageData(x,y,1,1).data:

에 대해 콘솔에서 이 오류가 발생합니다.

잡히지 않은 보안 오류: 'CanvasRenderingContext2D'에서 'getImageData' 실행 실패: 캔버스가 원본 간 데이터로 인해 오염되었습니다.

내 코드의 일부:

jQuery.Event.prototype.rgb=function(){
        var x = this.offsetX || (this.pageX - $(this.target).offset().left),y = this.offsetY || (this.pageY - $(this.target).offset(). 맨 위);
        if (this.target.nodeName!=="CANVAS")는 null을 반환합니다.
        return this.target.getContext('2d').getImageData(x,y,1,1).data;
    }

참고: 내 이미지 URL(src)은 하위 도메인 URL에서 나옵니다

Answer 1

다른 사람들이 말했듯이 교차 출처 도메인에서 로드하여 캔버스를 "오염"시키고 있습니다.

https://developer.mozilla.org/en-US/docs/ HTML/CORS_Enabled_Image

그러나 간단히 설정하여 이를 방지할 수 있습니다:

으아악

이 방법은 원격 서버가 다음 헤더를 올바르게 설정한 경우에만 작동합니다.

으아악

직접 링크 옵션 사용 시 Dropbox 파일 선택기이것은 좋은 예입니다. 저는 oddprints.com에서 이것을 사용하여 원격 보관용 이미지 URL의 이미지를 내 캔버스로 빨아들인 다음 이미지 데이터를 내 서버에 다시 제출합니다. 모두 JavaScript로 작성되었습니다