getImageData() 오류 문제 해결: 캔버스가 도메인 간 데이터로 오염되었습니다.
P粉343141633
P粉343141633 2023-08-29 12:52:11
0
1
580
<p>내 코드는 localhost에서는 제대로 실행되지만 웹사이트에서는 실행되지 않습니다. </p> <p>다음 줄 <code>.getImageData(x,y,1,1).data</code>:</p>에 대해 콘솔에서 이 오류가 발생합니다. <pre class="brush:php;toolbar:false;">잡히지 않은 보안 오류: 'CanvasRenderingContext2D'에서 'getImageData' 실행 실패: 캔버스가 원본 간 데이터로 인해 오염되었습니다.</pre> <p>내 코드의 일부:</p> <pre class="brush:php;toolbar:false;">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; }</pre> <p><strong>참고: </strong>내 이미지 URL(src)은 하위 도메인 URL에서 나옵니다</p>
P粉343141633
P粉343141633

모든 응답(1)
P粉465675962

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

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

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

으아악

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

으아악

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

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿