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)

    // 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

It is stated here: http://www.w3.org/TR/cors/#use-cases

---

Finally i found the solution. Just need add the crossOrigin as third param in fromURL func

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

---

I had the same problem and all the images are hosted in the same domain... So, if someone is having the same problem, here is how I solved:

I had two buttons: one to generate the canvas and another one to generate the image from the canvas. It only worked for me, and sorry that I don't know why, when I wrote all the code on the first button. So when I click it generate the canvas and the image at the same time...

I always have this security problem when the codes were on different functions... =/

---

I was able to make it work using this:

Write this on first line of your .htaccess on your source server

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

Then when creating an <img> element, do it as follows:

// 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');

---

You can't put spaces in your ID

Update

My guess is that image is on a different server than where you're executing the script. I was able to duplicate your error when running it on my own page, but it worked fine the moment I used an image hosted on the same domain. So it's security related - put the image on your site. Anyone know why this is the case?

---

If you are simply drawing some images on a canvas, make sure you are loading the images from the same domain.

www.example.com is different to example.com

So make sure your images and the url you have in your address bar are the same, www or not.

---

I'm using fabric.js and could resolve this by using toDatalessJSON instead of toDataURL:

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

Edit: Nevermind. This results in just the background image being exported to JPG, without the drawing on top so it was not entirely useful after all.

참고URL : https://stackoverflow.com/questions/2390232/why-does-canvas-todataurl-throw-a-security-exception