¿Capturar lienzo HTML como GIF/JPG/PNG/PDF?
¿Es posible capturar o imprimir lo que se muestra en un lienzo HTML como imagen o PDF?
Me gustaría generar una imagen a través del lienzo y poder generar un PNG a partir de esa imagen.
La respuesta original fue específica a una pregunta similar. Esto ha sido revisado:
const canvas = document.getElementById('mycanvas')
const img = canvas.toDataURL('image/png')
Con el valor en imgpuedes escribirlo como una nueva imagen así:
document.getElementById('existing-image-id').src = img
o
document.write('<img src="'+img+'"/>');
HTML5 proporciona Canvas.toDataURL(mimetype) que se implementa en Opera, Firefox y Safari 4 beta. Sin embargo, existen una serie de restricciones de seguridad (principalmente relacionadas con dibujar contenido de otro origen en el lienzo).
Entonces no necesitas una biblioteca adicional.
p.ej
<canvas id=canvas width=200 height=200></canvas>
<script>
window.onload = function() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillStyle = "green";
context.fillRect(50, 50, 100, 100);
// no argument defaults to image/png; image/jpeg, etc also work on some
// implementations -- image/png is the only one that must be supported per spec.
window.location = canvas.toDataURL("image/png");
}
</script>
En teoría, esto debería crear y luego navegar a una imagen con un cuadrado verde en el medio, pero no lo he probado.
Pensé en ampliar un poco el alcance de esta pregunta, con algunos datos útiles al respecto.
Para obtener el lienzo como imagen, debes hacer lo siguiente:
var canvas = document.getElementById("mycanvas");
var image = canvas.toDataURL("image/png");
Puedes usar esto para escribir la imagen en la página:
document.write('<img src="'+image+'"/>');
Donde "image/png" es un tipo mime (png es el único que debe ser compatible). Si desea una variedad de los tipos admitidos, puede hacer algo como esto:
var imageMimes = ['image/png', 'image/bmp', 'image/gif', 'image/jpeg', 'image/tiff']; //Extend as necessary
var acceptedMimes = new Array();
for(i = 0; i < imageMimes.length; i++) {
if(canvas.toDataURL(imageMimes[i]).search(imageMimes[i])>=0) {
acceptedMimes[acceptedMimes.length] = imageMimes[i];
}
}
Solo necesita ejecutar esto una vez por página; nunca debería cambiar durante el ciclo de vida de una página.
Si desea que el usuario descargue el archivo tal como está guardado, puede hacer lo siguiente:
var canvas = document.getElementById("mycanvas");
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); //Convert image to 'octet-stream' (Just a download, really)
window.location.href = image;
Si está usando eso con diferentes tipos de mime, asegúrese de cambiar ambas instancias de image/png, pero no image/octet-stream. También vale la pena mencionar que si utiliza recursos entre dominios para representar su lienzo, encontrará un error de seguridad cuando intente utilizar el método toDataUrl.
