다른 서버에서 이미지를 로드할 때 canvas.toDataURL()이 보안 예외를 발생시키는 이유는 무엇입니까?

Canvas toDataURL()의 교차 원본 문제

충분한 휴식을 보장하더라도 canvas.toDataURL()을 사용할 때 사용자에게 보안 예외가 발생할 수 있습니다. . 다음 코드를 고려해 보세요.

<code class="javascript">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)

    // Security exception occurs here:
    window.open(frame.toDataURL("image/png"));
}</code>

이 코드는 다른 서버의 이미지를 새 창에서 base64 데이터로 열려고 시도하지만 SECURITY_ERR 예외가 발생합니다.

사양에 따르면 , 캔버스 요소의 toDataURL() 메서드는 Origin-Clean 플래그가 false로 설정된 경우 SECURITY_ERR 예외를 발생시킵니다. 이미지가 다른 서버에서 로드되면 캔버스가 오염되고 해당 Origin-Clean 플래그가 false로 설정됩니다.

따라서 toDataURL()을 직접 사용하여 원본 이미지에 대한 base64 데이터를 얻을 수 없습니다. 다른 서버. 원본 간 이미지를 처리하려면 CORS 또는 프록시와 같은 대체 기술이 필요할 수 있습니다.

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