Hola a todo el mundo!!
Pues eso, llevo días y días y días y días desarrollando ( ojo, error mío por no comprobarlo antes ) y acabo de darme cuenta que canvas.toDataURL("image/png"); no funciona con CHROME.
Os cuento la idea es coger una imagen, manipularla, y después generar una copia de ese canvas en una imagen definida en la web. Algo del estilo:
/* CANVAS E IMAGEN DEFINIDA EN LA WEB ( INICIALMENTE VACIA )*/
<canvas width="1361" height="1005" id="micanvas">Su navegador no soporta canvas :( </canvas>
<img src="" id="imgCol2" style="width:100%"/>
/* DEFINO EL PNG QUE CARGARÉ EN EL CANVAS */
<script>
var canvas = document.getElementById("micanvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "./imagen.png";
/* CARGO EL PNG EN EL CANVAS Y POSTERIORMENTE TRASPASO EL CONTENIDO DEL CANVAS A LA IMAGEN DEFINIDA EN LA WEB */
img.onload = function(){
//incluyo la imagen en el canvas
ctx.drawImage(img, 0, 0);
//traspaso el contenido del canvas a la imagen definida en la web
var img2 = document.getElementById("imgCol2");
img2.src = canvas.toDataURL("image/png");
}
Funciona perfectamente en IE y en FF. EL problema lo tengo en el CHROME. Por lo visto hay algún tipo de restricción para realizar esta acción. Y me sale el error:
Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
Si alguien sabe cómo solucionar esto, se lo agradeceré. Jamás diría que iba a odiar a CHROME jajajaja
Muchas gracias!!
