Question Capturez le canevas HTML en tant que gif / jpg / png / pdf?


Est-il possible de capturer ou d'imprimer ce qui est affiché dans un canevas html sous forme d'image ou de pdf?

Je voudrais générer une image via canvas, et être capable de générer un png à partir de cette image.


606
2018-05-29 00:28


origine


Réponses:


Oops. La réponse originale était spécifique à une question similaire. Cela a été révisé:

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

avec la valeur en IMG, vous pouvez l'écrire comme une nouvelle image comme ceci:

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

632
2017-08-18 16:37



HTML5 fournit Canvas.toDataURL (mimetype) qui est implémenté dans Opera, Firefox et Safari 4 beta. Cependant, il y a un certain nombre de restrictions de sécurité (principalement pour dessiner du contenu d'une autre origine sur le canevas).

Vous n'avez donc pas besoin d'une bibliothèque supplémentaire.

par exemple.

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

Théoriquement cela devrait créer et ensuite naviguer vers une image avec un carré vert au milieu, mais je n'ai pas testé.


104
2018-05-29 02:48



Je pensais que j'étendrais un peu la portée de cette question, avec quelques informations utiles à ce sujet.

Pour obtenir la toile en tant qu'image, vous devez effectuer les opérations suivantes:

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

Vous pouvez l'utiliser pour écrire l'image sur la page:

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

Où "image / png" est un type mime (png est le seul qui doit être supporté). Si vous souhaitez un tableau des types pris en charge, vous pouvez faire quelque chose dans le sens suivant:

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

Vous avez seulement besoin de l'exécuter une fois par page - il ne devrait jamais changer au cours du cycle de vie d'une page.

Si vous souhaitez que l'utilisateur télécharge le fichier tel qu'il est enregistré, vous pouvez effectuer les opérations suivantes:

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 vous utilisez cela avec différents types mime, veillez à changer les deux instances de image / png, mais pas le flux image / octet. Il est également important de mentionner que si vous utilisez des ressources inter-domaines dans le rendu de votre canevas, vous rencontrerez une erreur de sécurité lorsque vous essayez d'utiliser la méthode toDataUrl.


35
2017-07-01 14:52



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

27
2018-05-22 09:40



J'utiliserais "wkhtmltopdf"Cela fonctionne très bien, il utilise le moteur webkit (utilisé dans Chrome, Safari, etc.), et il est très facile à utiliser:

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

C'est tout!

Essayez-le


21
2018-02-02 02:33



Voici de l'aide si vous faites le téléchargement via un serveur (de cette façon vous pouvez nommer / convertir / post-traiter / etc votre fichier):

-Publier les données en utilisant toDataURL

-Set les en-têtes

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

-créer une image

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

-exporter l'image en 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();

-ou comme PNG transparent

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

13
2017-07-22 17:33



Une autre solution intéressante est PhantomJS. C'est un script WebKit sans tête avec JavaScript ou CoffeeScript.

L'un des cas d'utilisation est la capture d'écran: vous pouvez capturer par programmation des contenus Web, y compris des images SVG et Canvas et / ou Créer des captures d'écran de sites Web avec aperçu des vignettes.

Le meilleur point d'entrée est le capture d'écran page wiki.

Voici un bon exemple pour l'horloge polaire (de RaphaelJS):

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

Voulez-vous rendre une page à un fichier PDF?

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

8
2018-05-21 11:28



Si vous utilisez jQuery, ce que font beaucoup de gens, alors vous implémentez la réponse acceptée comme ceci:

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

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

3
2017-09-07 11:01



Vous pouvez utiliser jspdf pour capturer une toile dans une image ou un pdf comme ceci:

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

Plus d'informations: https://github.com/MrRio/jsPDF


1
2017-12-13 21:27