img - javascript save canvas content

¿Por qué canvas.toDataURL() lanza una excepción de seguridad?

Question

¿No dormí lo suficiente o qué? Este siguiente código

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"));
}

está lanzando este error:

SECURITY_ERR: DOM Exception 18

¡No hay forma de que esto no funcione! ¿Alguien puede explicar esto, por favor?

Answer 1

En las specs dice:

Siempre que se llame al método toDataURL () de un elemento de lienzo cuya bandera de limpieza de origen se establece en falso, el método debe generar una excepción SECURITY_ERR.

Si la imagen proviene de otro servidor, no creo que pueda usar toDataURL ()

Answer 2

Establecer atributo de origen cruzado en los objetos de imagen que trabajé para mí (estaba usando 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'';

Para aquellos que usan fabricjs, aquí es cómo parchear 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;
};

Answer 3

Estoy usando fabric.js y podría resolver esto usando toDatalessJSON en vez de toDataURL:

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

Editar: No importa. Esto resulta en solo la imagen de fondo que se exporta a JPG, sin el dibujo en la parte superior, por lo que no fue del todo útil después de todo.

Answer 4

Finalmente encontré la solución. Solo es necesario agregar crossOrigin como tercer fromURL de la fromURL

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

Answer 5

No puedes poner espacios en tu ID

Actualizar

Supongo que esa imagen está en un servidor diferente al que está ejecutando el script. Pude duplicar tu error al ejecutarlo en mi propia página, pero funcionó bien en el momento en que usé una imagen alojada en el mismo dominio. Por lo tanto, está relacionado con la seguridad: coloque la imagen en su sitio. Alguien sabe por qué este es el caso?

Answer 6

Parece que hay una manera de evitar que si el alojamiento de imágenes puede proporcionar los siguientes encabezados HTTP para los recursos de imágenes y el navegador admita CORS:

access-control-allow-origin: * access-control-allow-credentials: true

Se establece aquí: http://www.w3.org/TR/cors/#use-cases

Answer 7

Pude hacer que funcione usando esto:

Escriba esto en la primera línea de su .htaccess en su servidor de origen

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

Luego, al crear un elemento <img> , hágalo de la siguiente manera:

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

Answer 8

Si la imagen está alojada en un host que establece Access-Control-Allow-Origin o Access-Control-Allow-Credentials, puede usar Cross Origin Resource Sharing (CORS). Vea aquí (el atributo crossorigin) para más detalles.

Su otra opción es que su servidor tenga un punto final que obtenga y sirva una imagen. (por ej., http://your_host/endpoint?url=URL ) La desventaja de ese enfoque es la latencia y la obtención teóricamente innecesaria.

Si hay más soluciones alternativas, me interesaría saber de ellas.

Answer 9

Si simplemente dibuja algunas imágenes en un lienzo, asegúrese de cargar las imágenes desde el mismo dominio.

www.example.com es diferente a example.com

Así que asegúrese de que sus imágenes y la URL que tiene en su barra de direcciones sean las mismas, www o no.

Answer 10

Tuve el mismo problema y todas las imágenes están alojadas en el mismo dominio ... Entonces, si alguien está teniendo el mismo problema, así es como lo resolví:

Tenía dos botones: uno para generar el lienzo y otro para generar la imagen desde el lienzo. Solo funcionó para mí, y lo siento, no sé por qué, cuando escribí todo el código en el primer botón. Entonces, cuando hago clic en él, genero el lienzo y la imagen al mismo tiempo ...

Siempre tengo este problema de seguridad cuando los códigos estaban en diferentes funciones ... = /