javascript - imagen - ¿Capturar HTML Canvas como gif/jpg/png/pdf?

save image javascript

Question

¿Es posible capturar o imprimir lo que se muestra en un lienzo html como una 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

Aquí hay alguna ayuda si realiza la descarga a través de un servidor (de esta manera puede nombrar / convertir / post-proceso / etc su archivo):

-Postar datos utilizando toDataURL

-Configurar los encabezados

$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");

-crear imagen

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

-exportar imagen 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();

-o tan transparente como PNG

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

Answer 2

En algunas versiones de Chrome, puedes:

1. Utilice la función de dibujar imagen ctx.drawImage(image1, 0, 0, w, h);
2. Clic derecho en el lienzo.

Answer 3

HTML5 proporciona Canvas.toDataURL (mimetype) que se implementa en Opera, Firefox y Safari 4 beta. Sin embargo, hay una serie de restricciones de seguridad (principalmente relacionadas con el dibujo de contenido de otro origen en el lienzo).

Así que 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.

Answer 4

Otra solución interesante es PhantomJS . Es un script de WebKit sin cabeza con JavaScript o CoffeeScript.

Uno de los casos de uso es la captura de pantalla: puede capturar mediante programación los contenidos web, incluidos SVG y Canvas y / o Crear capturas de pantalla del sitio web con vista previa en miniatura.

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

Aquí hay un buen ejemplo para el reloj polar (de RaphaelJS):

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

¿Quieres renderizar una página a un PDF?

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

Answer 5

Pensé que extendería el alcance de esta pregunta un poco, con algunos datos útiles sobre el tema.

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 matriz 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 debe cambiar a lo largo del ciclo de vida de una página.

Si desea que el usuario descargue el archivo 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á utilizando eso con diferentes tipos de mime, asegúrese de cambiar ambas instancias de image / png, pero no la imagen / octet-stream. También vale la pena mencionar que si usa cualquier recurso entre dominios para representar su lienzo, encontrará un error de seguridad cuando intente usar el método toDataUrl.

Answer 6

Puede usar jspdf para capturar un lienzo en una imagen o pdf como este:

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 7

Si está utilizando jQuery, lo que hacen muchas personas, entonces implementaría la respuesta aceptada así:

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

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

Answer 8

Ups. La respuesta original fue específica para una pregunta similar. Esto ha sido revisado:

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

Con el valor en IMG, puede escribirlo como una nueva imagen como:

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

Answer 9

Yo usaría " wkhtmltopdf ". Simplemente funciona muy bien. Utiliza el motor de webkit (usado en Chrome, Safari, etc.), y es muy fácil de usar:

wkhtmltopdf .com/questions/923885/ this_question.pdf

¡Eso es!

wkhtmltopdf

Answer 10

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