`canvas.toDataURL()`이 원본 간 이미지에 대해 보안 예외를 발생시키는 이유는 무엇입니까?

cross-Origin 이미지를 가져오는 동안 canvas.toDataURL()이 보안 예외를 트리거하는 이유는 무엇입니까?

canvas.toDataURL()을 실행하려고 할 때( ) 교차 출처 소스에서 가져온 이미지가 포함된 HTML5 캔버스 요소에서 "SECURITY_ERR: DOM Exception 18" 오류가 발생할 수 있습니다. 이는 웹 브라우저의 보안 제한으로 인해 발생합니다.

HTML5 사양에 따르면 toDataURL() 메서드는 "origin-clean" 플래그가 false인 캔버스 요소에서 호출될 때 SECURITY_ERR 예외를 발생시킵니다. 캔버스 요소에 해당 요소가 있는 문서와 동일한 출처의 리소스만 포함된 경우 이 플래그는 true로 설정됩니다. 귀하의 경우 이미지의 원본이 다른 도메인이므로 "origin-clean" 플래그가 false로 설정되어 있습니다.

해결 방법:

안타깝게도 이러한 보안 제약으로 인해 toDataURL()을 사용하여 원본 간 이미지의 PNG 표현을 검색할 수 없습니다. 이 문제를 해결하려면 다음 옵션을 고려하십시오.

• CORS 지원 프록시 사용: CORS(Cross-Origin Resource Sharing)를 활성화하는 서버 측 프록시를 설정합니다. 이를 통해 원본 간 요청을 수행하고 보안 제한을 우회할 수 있습니다.
• HTML5 파일 API 사용: toDataURL()을 사용하는 대신 File API를 활용하여 다음에서 File 객체를 생성합니다. 캔버스. 이를 통해 CORS에 의존하지 않고 이미지를 파일로 저장할 수 있습니다.
• 타사 서비스 사용: crossOrigin과 같이 원본 간 이미지 검색 기능을 제공하는 타사 서비스를 살펴보세요. .나.

위 내용은 `canvas.toDataURL()`이 원본 간 이미지에 대해 보안 예외를 발생시키는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!