canvas.toDataURL() SecurityError

Question

Поэтому я использую карты 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.
&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,/, "")); 

    }; 
} 

Но я получаю эту проблему:

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': tainted canvases may not be exported.

я искал для исправления. Я нашел образец здесь How to use CORS, но все же я не могу связать эти два фрагмента кода, чтобы он работал. Может быть, я делаю это неправильно, и есть более простой способ сделать это? Я пытаюсь сохранить этот рисунок, чтобы передать данные на свой сервер. Так что, возможно, кто-то сделал что-то вроде этого и знает, как сделать .toDataURL() работать так, как мне это нужно?

Answer 1

Если Google не служит этому изображению с правильным заголовком Access-Control-Allow-Origin, то вы не сможете использовать их изображение в холсте. Это связано с тем, что не было одобрено CORS. Вы можете прочитать больше об этом here, но это по существу означает:

Although you can use images without CORS approval in your canvas, doing so taints the canvas. Once a canvas has been tainted, you can no longer pull data back out of the canvas. For example, you can no longer use the canvas toBlob(), toDataURL(), or getImageData() methods; doing so will throw a security error.

This protects users from having private data exposed by using images to pull information from remote web sites without permission.

Я предлагаю просто передавая URL, чтобы на стороне сервера язык и использовать локон, чтобы загрузить изображение. Будьте осторожны, чтобы это сделать!

EDIT:

В этот ответ до сих пор принят ответ, вы должны проверить @shadyshrif's answer, которая заключается в использовании:

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

Это будет только работать, если у вас есть правильный разрешений, но по крайней мере позволит вам делать то, что вы хотите.

Answer 2

Просто используйте crossOrigin attribute и передать 'anonymous' в качестве второго параметра

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

Answer 3

Попробуйте следующий код ...

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

Answer 4

Этот метод позволит вам получать «Access-Control-Allow -Origin 'с сервера, к которому вы обращаетесь.

Answer 5

С помощью fabric 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; 
    } 

Answer 6

В моем случае я использовал обозревательУправление (принуждая IE 11), и я не мог пройти мимо ошибки. Переход на CefSharp, который использует Chrome, решил для меня.