캔버스 이미지가 도메인을 넘을 때 발생하는 문제 및 해결 방법 요약

이 글은 크로스 도메인 캔버스 이미지에서 발생하는 문제와 해결책을 요약한 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

CORS 없이도 캔버스를 사용할 수 있지만 캔버스에 그림을 사용하세요. 하지만 이렇게 하면 캔버스가 오염됩니다. 캔버스가 오염되면 해당 데이터를 읽을 수 없습니다. 예를 들어 캔버스의 toBlob(), toDataURL() 또는 getImageData() 메서드를 호출하면 보안 오류가 발생합니다. 이 메커니즘은 허가 없이 원격 웹사이트 정보를 가져옴으로써 발생하는 사용자 개인정보 유출을 방지할 수 있습니다.

HTML 사양의 이미지에는 crossorigin 속성이 있으며 적절한 CORS 응답 헤더와 결합되어 캔버스에서 크로스 도메인 요소의 이미지를 사용할 수 있습니다.

# 🎜🎜#도메인 간 CORSdefaultsupportsupport 렌더링 , 지원되지 않음 toDataURL

crossOrigin/CORS	동일 도메인	교차 도메인 CORS 없음
		toDataURL	支持渲染，不支持 toDataURL
anonymous	N/A	同上	支持渲染，支持 toDataURL
use-credentials	N/A	同上	支持渲染，不支持 toDataURL지원되는 렌더링, 지원되지 않음 toDataURL

anonymous # 🎜🎜#

N/A

위와 동일

렌더링 지원, toDataURL 지원

#🎜 🎜 #

use-credentials

N/A

위와 동일

렌더링 지원, toDataURL을 지원하지 않음 code>#🎜 🎜#<p></p> <p></p>Summary: 캔버스는 교차 도메인 이미지를 정상적으로 렌더링할 수 있지만, 교차 도메인 이미지가 교차 도메인 응답 헤더를 설정하지 않거나 crossOrigin = 'anonymous' 를 설정하지 않으면 canvas.toDataURl을 사용하면 다음 오류가 발생합니다: <p></p>Chrome<h2></h2>crossOrigin<p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. at Image.img.onload...</pre><div class="contentsignin">로그인 후 복사</div></div>cross-domain# 🎜🎜#<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">Access to Image at 'http://localhost:3001/canvas.jpg' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.</pre><div class="contentsignin">로그인 후 복사</div></div>#🎜🎜 #crossOrigin=use-credentials가 설정됨<p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">Access to Image at 'http://localhost:3002/canvas.jpg' from origin 'http://localhost:3000' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:3000' is therefore not allowed access.</pre><div class="contentsignin">로그인 후 복사</div></div>Safari/Firefox<p></p>crossOrigin이 설정되지 않음<p></p>SecurityError: The 작업이 안전하지 않습니다.<p> </p>Cross-domain<h2><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">[Error] Origin http://192.168.3.99:3000 is not allowed by Access-Control-Allow-Origin. [Error] Failed to load resource: Origin http://192.168.3.99:3000 is not allowed by Access-Control-Allow-Origin. (canvas.jpg, line 0) [Error] Cross-origin image load denied by Cross-Origin Resource Sharing policy.</pre><div class="contentsignin">로그인 후 복사</div></div></h2>Set corssOrigin=use-credentials<p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">[Error] Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true. [Error] Failed to load resource: Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true. (canvas.jpg, line 0) [Error] Cross-origin image load denied by Cross-Origin Resource Sharing policy.</pre><div class="contentsignin">로그인 후 복사</div></div>테스트 예<p></p>1 . 서버 시작<p># 🎜🎜#npm start：서버 시작</p> <p>npm run start:corsdisable：크로스 도메인 이미지 서버 시작</p> <p class="comments-box-content">npm run start :corsable：교차 도메인 CORS 이미지 서버를 시작합니다#🎜 🎜#</p>2. http://localhost:3000#🎜🎜##🎜🎜#기타 문제#🎜🎜##🎜🎜#1을 방문하세요. cossOrigin#🎜🎜##🎜🎜#cossOrigin(IE 10 이하, Android 4.3 이하)을 지원하지 않는 브라우저의 경우 호환성을 위해 XMLHttprequest 및 URL.createObjectURL()을 사용할 수 있습니다. 캔버스 이미지의 도메인 간 문제를 해결합니다. #🎜🎜##🎜🎜#2. 동일한 도메인의 이미지를 사용하는 것은 어떨까요? #🎜🎜##🎜🎜# 현재 프런트 엔드 개발은 일반적으로 Alibaba Cloud 또는 Tencent Cloud Services와 같은 정적 리소스를 CDN에 배치하며 이러한 리소스에 액세스하기 위한 전용 도메인 이름이 있습니다. #🎜🎜##🎜🎜##🎜🎜#

위 내용은 캔버스 이미지가 도메인을 넘을 때 발생하는 문제 및 해결 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!