¿Capturar HTML Canvas como gif/jpg/png/pdf?

Question

¿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.

Answer 1

Vaya. Respuesta original era específica a una pregunta similar. Esto ha sido revisado:

var canvas = document.getElementById("mycanvas");
var img    = canvas.toDataURL("image/png");

con el valor en IMG se puede escribir como una nueva imagen de este modo:

document.write('<img src="'+img+'"/>');

Answer 2

HTML5 proporciona canvas.toDataURL (tipo MIME) que se implementa en Opera, Firefox, y Safari 4 beta. Hay una serie de restricciones de seguridad, sin embargo (sobre todo que ver con la elaboración de contenido de otro origen en el lienzo).

Así que no es necesario una biblioteca adicional.

por ejemplo.

 <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 vaya a una imagen con un cuadrado verde en el medio de ella, pero no he probado.

Answer 3

que pensé en ampliar el alcance de esta pregunta un poco, con algunos datos útiles sobre la materia.

Con el fin de obtener el lienzo como una imagen, se debe hacer lo siguiente:

var canvas = document.getElementById("mycanvas");
var image = canvas.toDataURL("image/png");

Puede usar esto para escribir la imagen en la página:

document.write('<img src="'+image+'"/>');

Donde "imagen / png" es un tipo de MIME (PNG es el único que debe ser compatible). Si desea una matriz de los tipos soportados se puede hacer algo en la línea de lo siguiente:

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];
    }
}

Sólo tiene que ejecutar esta vez por página - que nunca debería cambiar a través del ciclo de vida de una página

.

Si desea hacer que el usuario descargue el archivo que está grabado se 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á utilizando que, con diferentes tipos MIME, asegúrese de cambiar las dos instancias de imagen / png, pero no la imagen / octet-stream. También vale la pena mencionar que si utiliza los recursos entre dominios en la prestación de su lienzo, se encontrará con un error de seguridad cuando intenta utilizar el método toDataUrl.

Answer 4

function exportCanvasAsPNG(id, fileName) {

    var canvasElement = document.getElementById(id);

    var MIME_TYPE = "image/png";

    var imgURL = canvasElement.toDataURL(MIME_TYPE);

    var dlLink = document.createElement('a');
    dlLink.download = fileName;
    dlLink.href = imgURL;
    dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');

    document.body.appendChild(dlLink);
    dlLink.click();
    document.body.removeChild(dlLink);
}

Answer 5

Me gustaría utilizar " wkhtmltopdf ". Es simplemente un gran trabajo. Se utiliza el motor webkit (utilizado en Chrome, Safari, etc.), y es muy fácil de usar:

wkhtmltopdf stackoverflow.com/questions/923885/ this_question.pdf

Eso es todo!

Inténtelo

Answer 6

Aquí es un poco de ayuda si lo hace la descarga a través de un servidor (de esta manera se puede nombrar / convertir / post-proceso / etc el archivo):

-Post datos utilizando toDataURL

-Establecer las cabeceras

$filename = "test.jpg"; //or png
header('Content-Description: File Transfer');
if($msie = !strstr($_SERVER["HTTP_USER_AGENT"],"MSIE")==false)      
  header("Content-type: application/force-download");else       
  header("Content-type: application/octet-stream"); 
header("Content-Disposition: attachment; filename=\"$filename\"");   
header("Content-Transfer-Encoding: binary"); 
header("Expires: 0"); header("Cache-Control: must-revalidate"); 
header("Pragma: public");

imagen -create

$data = $_POST['data'];
$img = imagecreatefromstring(base64_decode(substr($data,strpos($data,',')+1)));

como JPEG

$width = imagesx($img);
$height = imagesy($img);
$output = imagecreatetruecolor($width, $height);
$white = imagecolorallocate($output,  255, 255, 255);
imagefilledrectangle($output, 0, 0, $width, $height, $white);
imagecopy($output, $img, 0, 0, 0, 0, $width, $height);
imagejpeg($output);
exit();

-OR como transparente PNG

imagesavealpha($img, true);
imagepng($img);
die($img);

Answer 7

Otra solución interesante es PhantomJS . Es una WebKit sin cabeza de secuencias de comandos con JavaScript o CoffeeScript.

Uno de los casos de uso es la captura de pantalla:. Puede capturar mediante programación contenidos de la web, incluyendo SVG y Canvas y / o crear capturas de pantalla de sitios web con vista previa en miniatura

El mejor punto de entrada es el de captura de pantalla página wiki.

Este es un buen ejemplo para el reloj polar (de RaphaelJS):

>phantomjs rasterize.js http://raphaeljs.com/polar-clock.html clock.png

¿Desea presentar una página de un PDF?

> phantomjs rasterize.js 'http://en.wikipedia.org/w/index.php?title=Jakarta&printable=yes' jakarta.pdf

Answer 8

Si está utilizando jQuery, que un buen montón de gente, entonces se pondría en práctica la respuesta aceptada de este modo:

var canvas = $("#mycanvas")[0];
var img = canvas.toDataURL("image/png");

$("#elememt-to-write-to").html('<img src="'+img+'"/>');

Answer 9

Puede utilizar jspdf para capturar un lienzo en una imagen o pdf de esta manera:

var imgData = canvas.toDataURL('image/png');              
var doc = new jsPDF('p', 'mm');
doc.addImage(imgData, 'PNG', 10, 10);
doc.save('sample-file.pdf');

Más información: https://github.com/MrRio/jsPDF

Answer 10

En algunas versiones de Chrome, es posible:

1. Utilice la función de imagen sorteo ctx.drawImage(image1, 0, 0, w, h);
2. Haga clic en el lienzo