Cattura la tela HTML come gif / jpg / png / pdf?

È possibile catturare o stampare ciò che viene visualizzato in una tela html come immagine o pdf?

Vorrei generare un'immagine tramite tela ed essere in grado di generare un png da quell'immagine.

Ops. La risposta originale era specifica per una domanda simile. Questo è stato rivisto:

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

con il valore in IMG puoi scriverlo come una nuova immagine in questo modo:

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

HTML5 fornisce Canvas.toDataURL (mimetype) implementato in Opera, Firefox e Safari 4 beta. Esistono tuttavia alcune restrizioni di sicurezza (principalmente legate al disegno di contenuti di un'altra origine sulla tela).

Quindi non hai bisogno di una libreria aggiuntiva.

per esempio

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

Teoricamente questo dovrebbe creare e quindi navigare verso un'immagine con un quadrato verde nel mezzo di esso, ma non ho ancora testato.

Ho pensato di estendere un po 'la portata di questa domanda, con alcune utili notizie in merito.

Per ottenere la tela come immagine, è necessario effettuare le seguenti operazioni:

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

Puoi usarlo per scrivere l'immagine nella pagina:

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

Dove "image / png" è un tipo mime (png è l'unico che deve essere supportato). Se desideri una matrice dei tipi supportati, puoi fare qualcosa del genere:

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

Devi eseguirlo solo una volta per pagina, non dovrebbe mai cambiare durante il ciclo di vita di una pagina.

Se desideri che l'utente scarichi il file mentre viene salvato, puoi effettuare le seguenti operazioni:

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;

Se lo stai usando con diversi tipi di mime, assicurati di cambiare entrambe le istanze di image / png, ma non l'immagine / flusso di ottetti. Vale anche la pena ricordare che se si utilizzano risorse tra domini per il rendering del canvas, si verificherà un errore di sicurezza quando si tenta di utilizzare il metodo toDataUrl.

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

Vorrei usare " wkhtmltopdf ". Funziona alla grande. Utilizza il motore webkit (utilizzato in Chrome, Safari, ecc.) Ed è molto facile da usare:

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

Questo è tutto!

Provalo

Ecco qualche aiuto se esegui il download attraverso un server (in questo modo puoi nominare / convertire / post-process / etc il tuo file):

-Post dati utilizzando toDataURL

-Impostare le intestazioni

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

-creare l'immagine

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

-esporta l'immagine come 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 come PNG trasparente

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

Un'altra soluzione interessante è PhantomJS . È un WebKit senza testa programmabile con JavaScript o CoffeeScript.

Uno dei casi d'uso è l'acquisizione di schermate: è possibile acquisire a livello di codice contenuti Web, inclusi SVG e Canvas e / o creare schermate di siti Web con anteprima in anteprima.

Il miglior punto di ingresso è la pagina wiki di cattura schermo .

Ecco un buon esempio di orologio polare (da RaphaelJS):

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

Vuoi rendere una pagina in un PDF?

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

Se stai usando jQuery, cosa che fanno molte persone, allora implementeresti la risposta accettata in questo modo:

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

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

Puoi usare jspdf per catturare una tela in un'immagine o pdf in questo modo:

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

Ulteriori informazioni: https://github.com/MrRio/jsPDF

Questo è l'altro modo, senza stringhe, anche se non so se sia più veloce o meno. Invece di toDataURL (come tutte le domande qui proposte). Nel mio caso voglio impedire dataUrl / base64 poiché ho bisogno di un buffer o di una vista di array. Quindi l'altro metodo in HTMLCanvasElement è toBlob. (Funzione TypeScript):

    export function canvasToArrayBuffer(canvas: HTMLCanvasElement, mime: string): Promise<ArrayBuffer> {
  return new Promise((resolve, reject) => canvas.toBlob(async (d) => {
    if (d) {
      const r = new FileReader();
      r.addEventListener('loadend', e => {
        const ab = r.result;
        if (ab) {
          resolve(ab as ArrayBuffer);
        }
        else {
           reject(new Error('Expected FileReader result'));
        }
      }); r.addEventListener('error', e => {
        reject(e)
      });
      r.readAsArrayBuffer(d);
    }
    else {
      reject(new Error('Expected toBlob() to be defined'));
    }
  }, mime));
}

Un altro vantaggio dei BLOB è che è possibile creare ObjectUrl per rappresentare i dati come file, in modo simile al membro 'file' di HTMLInputFile. Ulteriori informazioni:

https://developer.mozilla.org/es/docs/Web/API/HTMLCanvasElement/toBlob

Su alcune versioni di Chrome, puoi:

1. Utilizzare la funzione Disegna immagine ctx.drawImage(image1, 0, 0, w, h);
2. Fare clic con il tasto destro sulla tela