canvas.toDataURL () SecurityError

canvas.toDataURL () SecurityError

---

그래서 저는 Google지도를 사용하고 있습니다. 사진이 찍혀서 이렇게 보입니다.

<img id="staticMap"
        src="http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap
&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318
&markers=color:red%7Ccolor:red%7Clabel:C%7C40.718217,-73.998284&sensor=false">

저장해야합니다. 나는 이것을 발견했다 :

function getBase64FromImageUrl(URL) {
    var img = new Image();
    img.src = URL;
    img.onload = function() {

        var canvas = document.createElement("canvas");
        canvas.width = this.width;
        canvas.height = this.height;

        var ctx = canvas.getContext("2d");
        ctx.drawImage(this, 0, 0);

        var dataURL = canvas.toDataURL("image/png");

        alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));

    };
}

하지만이 문제가 발생합니다.

잡히지 않은 SecurityError : 'HTMLCanvasElement'에서 'toDataURL'을 실행하지 못했습니다. 오염 된 캔버스를 내보낼 수 없습니다.

수정 사항을 검색했습니다. 여기서 CORS 사용 방법에 대한 샘플을 찾았 지만 여전히이 두 가지 코드를 함께 묶어 작동시킬 수는 없습니다. 어쩌면 내가 잘못하고 있고 더 간단한 방법이 있습니까? 데이터를 서버로 전송할 수 있도록이 사진을 저장하려고합니다. 그래서 누군가가 이런 .toDataURL()일을했고 내가 필요로 할 때 일 을 만드는 방법을 알고 있습니까?

---

Google이 올바른 Access-Control-Allow-Origin헤더 와 함께이 이미지를 제공하지 않으면 캔버스에서 이미지를 사용할 수 없습니다. 이것은 CORS승인 을받지 못했기 때문입니다. 여기 에서 자세한 내용을 읽을 수 있지만 본질적으로 다음을 의미합니다.

캔버스에서 CORS 승인없이 이미지를 사용할 수 있지만 그렇게하면 캔버스가 오염됩니다. 캔버스가 오염되면 더 이상 캔버스에서 데이터를 다시 가져올 수 없습니다. 예를 들어, 캔버스 toBlob (), toDataURL () 또는 getImageData () 메소드를 더 이상 사용할 수 없습니다. 그렇게하면 보안 오류가 발생합니다.

이렇게하면 허가없이 원격 웹 사이트에서 정보를 가져 오는 이미지를 사용하여 개인 데이터가 노출되지 않도록 사용자를 보호합니다.

URL을 서버 측 언어로 전달하고 curl을 사용하여 이미지를 다운로드하는 것이 좋습니다. 그래도 이것을 살균하도록 조심하십시오!

편집하다:

이 답변은 여전히 ​​받아 들여지는 답변이므로 @shadyshrif의 답변을 확인해야 합니다.

var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url;

이 의지 만 작업 올바른 권한을 가지고 있지만, 적어도 당신은 당신이 원하는 것을 할 수있게됩니다.

---

crossOrigin속성을 사용하고 'anonymous'두 번째 매개 변수로 전달 하십시오.

var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url;

---

이 방법을 사용하면 액세스중인 서버에서 'Access-Control-Allow-Origin'오류가 발생하지 않습니다.

var img = new Image();
var timestamp = new Date().getTime();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url + '?' + timestamp;

---

아래 코드를 시도하십시오 ...

<img crossOrigin="anonymous"
     id="imgpicture" 
     fall-back="images/penang realty,Apartment,house,condominium,terrace house,semi d,detached,
                bungalow,high end luxury properties,landed properties,gated guarded house.png" 
     ng-src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" 
     height="220"
     width="200"
     class="watermark">

---

제 경우에는 WebBrowser 컨트롤 (IE 11 강제 ​​적용)을 사용하고 있었는데 오류를 지나칠 수 없었습니다. Chrome을 사용하는 CefSharp로 전환하면 문제가 해결되었습니다.

---

패브릭 js 를 사용 하면 IE에서이 보안 오류 문제를 해결할 수 있습니다.

    function getBase64FromImageUrl(URL) {
        var canvas  = new fabric.Canvas('c');
        var img = new Image();
        img.onload = function() {
            var canvas1 = document.createElement("canvas");
            canvas1.width = this.width;
            canvas1.height = this.height;
            var ctx = canvas.getContext('2d');
            ctx.drawImage(this, 0, 0);
            var dataURL = canvas.toDataURL({format: "png"});
        };
        img.src = URL;
    }

참고URL : https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror