Canvas toDataURL()의 교차 원본 문제

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

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"));
}

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

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

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