tainted not may htmlcanvaselement failed exported data canvases javascript dom canvas

not - javascript todataurl



toDataURL no es una funciĆ³n (5)

Estoy tratando de generar una url para el lienzo. Aquí están los pasos que seguí:

var can = document.getElementsByTagName("canvas"); var src = can.toDataURL("image/png");

Cuando intenté ejecutar el código anterior en firebug, se produce un error:

TypeError: can.toDataURL is not a function

Estoy ejecutando Firefox 8 en Ubuntu.


(¡RESUELTO!) Me he encontrado con este problema y lo resolví. En primer lugar, debe verificar que ha incluido el CDN HTML2CANVAS.js en sus enlaces de script en su etiqueta de cabecera. Para hacer esto, debe pegar esta secuencia de comandos en su etiqueta de cabecera, después del CDN jquery: (agregue esta secuencia de comandos a continuación en su etiqueta de cabeza)

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

en este CDN, la función ''toDataURL'' se ha definido y si accede a este enlace y busca (con CTRL + F) en esta página de script, puede encontrar la función toDataURL. (que se ha definido en este CDN) AHORA mi etiqueta de cabecera es como esta a continuación y funciona:

<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> </head>


Algo que no se menciona en la respuesta aceptada: incluso cuando se usa un selector de ID, jQuery''s Sizzle devuelve un objeto / colección. Entonces, si está recibiendo este error mientras usa jQuery, use el apéndice [0] para acceder al primer índice del elemento. Si tiene curiosidad, los índices se pueden explorar utilizando console.dir($(''#canvasId));

Por ejemplo, este selector perfectamente normal fallaría:

var src = $(''#canvasId'').toDataURL("image/png");

Pero este funcionaría (note el paréntesis adicional):

var src = ($(''#canvasId'')[0]).toDataURL("image/png");


Compruebe que está ejecutando toDataURL() el propio objeto de lienzo, no en el objeto de contexto.


getElementsByTagName devuelve un NodeList [docs] , no un solo elemento.

Simplemente acceda al primer elemento de la lista:

var src = can[0].toDataURL("image/png");

Si desea obtener la URL de datos para cada lienzo, debe iterar sobre la lista. De lo contrario, puede ser más conveniente getElementById al lienzo una identificación y recuperar la referencia con getElementById .


var can = document.getElementsByTagName("canvas");

Esto devuelve una matriz de elementos de lienzo. Necesitas conseguir el lienzo por id.

var can = document.getElementById("canvasId");