¿Por qué canvas.toDataURL() genera una excepción de seguridad?
¿No dormí lo suficiente o qué? El 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á arrojando este error:
SECURITY_ERR: DOM Exception 18
¡No hay manera de que esto no funcione! ¿Alguien puede explicar esto, por favor?
En las especificaciones dice:
Siempre que se llama al método toDataURL() de un elemento de lienzo cuyo indicador de limpieza de origen está establecido en falso, el método debe generar una excepción SECURITY_ERR.
Si la imagen proviene de otro servidor, no creo que puedas usar toDataURL()
Configurar el atributo de origen cruzado en los objetos de imagen funcionó 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í se explica 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;
};
Si la imagen está alojada en un host que establece Access-Control-Allow-Origin o Access-Control-Allow-Credentials, puede utilizar Cross Origin Resource Sharing (CORS). Consulte aquí (el atributo crossorigin) para obtener más detalles.
Su otra opción es que su servidor tenga un punto final que obtenga y proporcione una imagen. (por ejemplo, http://your_host/endpoint?url=URL ) La desventaja de ese enfoque es la latencia y la recuperación teóricamente innecesaria.
Si hay más soluciones alternativas, me interesaría conocerlas.
