javascript - picture - todataurl(' image png ')




Cattura tela HTML come gif/jpg/png/pdf? (7)

Ecco qualche aiuto se si esegue il download tramite un server (in questo modo è possibile nominare / convertire / post-processare / etc il 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)));

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

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

Mi piacerebbe generare un'immagine tramite tela, ed essere in grado di generare un png da quell'immagine.


HTML5 fornisce Canvas.toDataURL (mimetype) implementato in Opera, Firefox e Safari 4 beta. Esistono tuttavia numerose restrizioni di sicurezza (principalmente per quanto riguarda il disegno di contenuti da 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, ma non l'ho testato.


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+'"/>');

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

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

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


Su alcune versioni di Chrome, puoi:

  1. Usa la funzione di disegno immagine ctx.drawImage(image1, 0, 0, w, h); immagine1 ctx.drawImage(image1, 0, 0, w, h);
  2. Fai clic destro sulla tela

Un'altra soluzione interessante è PhantomJS . È un WebKit headless con scriptable con JavaScript o CoffeeScript.

Uno dei casi d'uso è la cattura dello schermo: è possibile acquisire a livello di programmazione contenuti Web, tra cui SVG e Canvas e / o creare screenshot del sito Web con anteprima in miniatura.

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

Ecco un buon esempio per l'orologio polare (da RaphaelJS):

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

Vuoi rendere una pagina a un PDF?

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

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




png