다른 출처에서 이미지를 그릴 때 `canvas.toDataURL()`에서 `SECURITY_ERR`이 발생하는 이유는 무엇입니까?

'canvas.toDataURL()'의 보안 예외 이해

다음 코드를 고려하세요.

<pre class="brush:php;toolbar:false">
var frame=document.getElementById("viewer");
frame.width=100;
frame.height=100;

var ctx=frame.getContext("2d");
var img=new Image();
img.src="http://www.ansearch.com/images/interface/item/small/image.png"

img.onload=function() {
    // draw image
    ctx.drawImage(img, 0, 0)

    // Here's where the error happens:
    window.open(frame.toDataURL("image/png"));
}

이 코드는 'toDataURL()' 메서드를 사용하여 캔버스 요소를 데이터 URL로 변환하려고 시도합니다. 그러나 이로 인해 'SECURITY_ERR: DOM Exception 18' 오류가 발생합니다.

이 오류가 발생하는 이유는 웹 브라우저의 보안 제한 때문입니다. HTML Canvas 사양에 따르면 캔버스에 그려지는 이미지가 다른 출처(이 경우 'http://www.ansearch.com')에서 가져온 경우 브라우저는 캔버스를 다음으로 변환하는 것을 방지합니다. 데이터 URL. 이는 원본 간 데이터 액세스 및 잠재적인 보안 취약성을 방지하기 위해 수행됩니다.

따라서 다른 원본의 이미지가 포함된 캔버스 요소에서 데이터 URL을 생성하려고 하면 이러한 보안 문제가 발생합니다. 예외. 이 문제를 해결하려면 이미지가 웹 애플리케이션과 동일한 출처에서 제공되는지 확인하거나 이미지 변환의 대체 방법을 모색해야 합니다.

위 내용은 다른 출처에서 이미지를 그릴 때 `canvas.toDataURL()`에서 `SECURITY_ERR`이 발생하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!