javascript - enable - canvas.toDataURL() SecurityError

habilitar cors

Question

Así que estoy usando Google Maps y obtengo la imagen para que se vea así

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

Necesito guardarlo. He encontrado esto:

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,/, ""));

    };
}

Pero tengo este problema:

Uncaught SecurityError: no se pudo ejecutar ''toDataURL'' en ''HTMLCanvasElement'': los lienzos contaminados no se pueden exportar.

Busqué soluciones. Encontré una muestra aquí Cómo usar CORS, pero aún así no puedo unir estos 2 códigos para que funcionen. Tal vez lo estoy haciendo de la manera incorrecta y hay una manera más simple de hacerlo? Intento guardar esta foto para poder transferir los datos a mi servidor. Entonces, ¿alguien hizo algo como esto y sabe cómo hacer que el trabajo .toDataURL() funcione como lo necesito?

Answer 1

A menos que Google publique esta imagen con el encabezado correcto de Access-Control-Allow-Origin , entonces no podrá usar su imagen en lienzo. Esto se debe a que no se cuenta con la aprobación de CORS . Puedes leer más sobre esto here , pero esencialmente significa:

Aunque puede usar imágenes sin la aprobación CORS en su lienzo, hacerlo daña el lienzo. Una vez que un lienzo se ha contaminado, ya no puede extraer los datos del lienzo. Por ejemplo, ya no puede usar los métodos lienzo toBlob (), toDataURL () ni getImageData (); hacerlo arrojará un error de seguridad.

Esto protege a los usuarios de tener datos privados expuestos mediante el uso de imágenes para extraer información de sitios web remotos sin permiso.

Sugiero simplemente pasar la URL a su idioma del lado del servidor y usar curl para descargar la imagen. ¡Pero ten cuidado de desinfectar esto!

EDITAR:

Como esta respuesta sigue siendo la aceptada, debe verificar la respuesta de @shadyshrif , que es la siguiente:

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

Esto solo funcionará si tiene los permisos correctos, pero al menos le permitirá hacer lo que quiera.

Answer 2

Al usar fabric js , podemos resolver este problema de error de seguridad en 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 3

En mi caso, estaba usando el control WebBrowser (forzando IE 11) y no pude pasar el error. Cambiar a CefSharp que usa Chrome me lo resolvió.

Answer 4

Este método evitará que obtenga un error de "Acceso-Control-Permitir-Origen" desde el servidor al que está accediendo.

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

Answer 5

Prueba el siguiente código ...

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

Simplemente use el atributo crossOrigin y pase ''anonymous'' como el segundo parámetro

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