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)

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

이 오류가 발생합니다.

SECURITY_ERR: DOM Exception 18

이것이 작동하지 않을 방법이 없습니다! 누구든지 이것을 설명 할 수 있습니까?

에서 사양 은 말합니다 :

origin-clean 플래그가 false로 설정된 캔버스 요소의 toDataURL () 메서드가 호출 될 때마다 메서드는 SECURITY_ERR 예외를 발생시켜야합니다.

이미지가 다른 서버에서 오는 경우 toDataURL ()을 사용할 수 없다고 생각합니다.

이미지 객체에 대한 교차 출처 속성 설정이 저에게 효과적이었습니다 (나는 fabricjs를 사용했습니다)

    var c = document.createElement("img");
    c.onload=function(){
        // add the image to canvas or whatnot
        c=c.onload=null
    };
    c.setAttribute('crossOrigin','anonymous');
    c.src='http://google.com/cat.png';

fabricjs를 사용하는 경우 Image.fromUrl을 패치하는 방법은 다음과 같습니다.

// patch fabric for cross domain image jazz
fabric.Image.fromURL=function(d,f,e){
    var c=fabric.document.createElement("img");
    c.onload=function(){
        if(f){f(new fabric.Image(c,e))}
        c=c.onload=null
    };
    c.setAttribute('crossOrigin','anonymous');
    c.src=d;
};

이미지가 Access-Control-Allow-Origin 또는 Access-Control-Allow-Credentials 중 하나를 설정하는 호스트에서 호스팅되는 경우 CORS (Cross Origin Resource Sharing)를 사용할 수 있습니다. 자세한 내용은 여기 (crossorigin 속성)를 참조하십시오.

다른 옵션은 서버에 이미지를 가져 와서 제공하는 엔드 포인트를 갖는 것입니다. (예 : http : // your_host / endpoint? url = URL ) 이러한 접근 방식의 단점은 지연 시간과 이론적으로 불필요한 가져 오기입니다.

대체 솔루션이 더 있다면 그에 대해 듣고 싶습니다.

이미지 호스팅이 이미지 리소스에 대해 다음 HTTP 헤더를 제공 할 수 있고 브라우저가 CORS를 지원하는 경우이를 방지하는 방법이있는 것 같습니다.

액세스 제어 허용 출처 : *
액세스 제어 허용 자격 증명 : true

http://www.w3.org/TR/cors/#use-cases에 명시되어 있습니다.

마침내 해결책을 찾았습니다. func에 crossOrigin세 번째 매개 변수를 추가하면 됩니다.fromURL

fabric.Image.fromURL(imageUrl, function (image) {
            //your logic
    }, { crossOrigin: "Anonymous" });

나는 동일한 문제가 있었고 모든 이미지가 동일한 도메인에서 호스팅됩니다 ... 따라서 누군가가 동일한 문제를 겪고 있다면 여기에 내가 해결 한 방법이 있습니다.

하나는 캔버스를 생성하고 다른 하나는 캔버스에서 이미지를 생성하는 두 개의 버튼이 있습니다. 그것은 나에게만 효과가 있었으며 첫 번째 버튼에 모든 코드를 작성했을 때 이유를 모르겠다는 점에 유감입니다. 그래서 클릭하면 캔버스와 이미지가 동시에 생성됩니다.

코드가 다른 기능에있을 때 항상이 보안 문제가 있습니다 ... = /

나는 이것을 사용하여 작동시킬 수 있었다.

.htaccess소스 서버 의 첫 번째 줄에 작성하십시오.

Header add Access-Control-Allow-Origin "*"

그런 다음 <img>요소를 만들 때 다음과 같이하십시오.

// jQuery
var img = $('<img src="http://your_server/img.png" crossOrigin="anonymous">')[0]

// or pure
var img = document.createElement('img');
img.src='http://your_server/img.png';
img.setAttribute('crossOrigin','anonymous');

ID에 공백을 넣을 수 없습니다.

최신 정보

내 생각 엔 이미지가 스크립트를 실행하는 것과 다른 서버에 있다는 것입니다. 내 페이지에서 실행할 때 오류를 복제 할 수 있었지만 동일한 도메인에서 호스팅되는 이미지를 사용하는 순간 제대로 작동했습니다. 따라서 보안과 관련이 있습니다. 이미지를 귀하의 사이트에 올리십시오. 왜 이것이 사실인지 아는 사람이 있습니까?

캔버스에 이미지를 단순히 그리는 경우 동일한 도메인에서 이미지를로드하고 있는지 확인하십시오.

www.example.com 은 example.com 과 다릅니다.

따라서 주소 표시 줄에있는 이미지와 URL이 www이든 아니든 동일한 지 확인하십시오.

fabric.js를 사용하고 있으며 toDataURL 대신 toDatalessJSON을 사용하여이 문제를 해결할 수 있습니다.

canvas.toDatalessJSON({ format: 'jpeg' }).objects[0].src

편집 : 신경 쓰지 마세요. 이로 인해 배경 이미지 만 JPG로 내보내지고 맨 위에 그림이 표시되지 않아 결국 완전히 유용하지 않았습니다.