web-dev-qa-db-fra.com

capture div en image en utilisant html2canvas

J'essaie de capturer une div dans une image en utilisant html2canvas

J'ai lu une question similaire ici comme

Comment télécharger une capture d'écran en utilisant html2canvas?

créer une capture d'écran de la page Web en utilisant html2canvas (impossible d'initialiser correctement)

J'ai essayé le code

canvasRecord = $('#div').html2canvas(); 
dataURL = canvasRecord.toDataURL("image/png");

et le canvasRecord sera undefined après .html2canvas() appelée

et aussi cela

$('#div').html2canvas({
      onrendered: function (canvas) {
           var img = canvas.toDataURL()
           window.open(img);
      } 
});

le navigateur donne des erreurs similaires (48 pour être exact) comme:

GET http://html2canvas.appspot.com/?url=https%3A%2F%2Fmts1.googleapis.com%2Fvt%…%26z%3D12%26s%3DGalileo%26style%3Dapi%257Csmartmaps&callback=html2canvas_1 404 (Not Found)

BTW, j'utilise v0.34 et j'ai ajouté le fichier de référence html2canvas.min.js Et jquery.plugin.html2canvas.js

Comment puis-je convertir le div en canvas afin de capturer l'image.

EDIT du 26/Mars/2013

J'ai trouvé l'exemple de Joel fonctionne.

Mais malheureusement, lorsque Google Map sera intégré à mon application, des erreurs se produiront.

<html>
<head>
<style type="text/css">
div#testdiv
{
    height:200px;
    width:200px;
    background:#222;
}
div#map_canvas
{
    height: 500px;
    width: 800px;
    position: absolute !important;
    left: 500px;
    top: 0;
}
</style>
 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<script type="text/javascript" src="html2canvas.min.js"></script>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script language="javascript">
$(window).load(function(){
     var mapOptions = {
        backgroundColor: '#fff',
        center: new google.maps.LatLng(1.355, 103.815),
        overviewMapControl: true,
        overviewMapControlOptions: { opened: false },
        mapTypeControl: true,
        mapTypeControlOptions: { position: google.maps.ControlPosition.TOP_LEFT, style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
        panControlOptions: { position: google.maps.ControlPosition.RIGHT_CENTER },
        zoomControlOptions: { position: google.maps.ControlPosition.RIGHT_CENTER },
        streetViewControlOptions: { position: google.maps.ControlPosition.RIGHT_CENTER },
        disableDoubleClickZoom: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        minZoom: 1,
        zoom: 12
    };
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    $('#load').click(function(){

            html2canvas($('#testdiv'), {
                onrendered: function (canvas) {
                    var img = canvas.toDataURL("image/png")
                    window.open(img);
                }
            });

    });
});
</script>
</head>
<body>
<div id="testdiv">
</div>
<div id="map_canvas"></div>
<input type="button" value="Save" id="load"/>
</body>
</html>
javascripthtmlhtml5html2canvas
31
Timeless

J'ai rencontré le même type d'erreur que vous avez décrit, mais la mienne était due au fait que le dom n'était pas complètement prêt à partir. J'ai testé à la fois avec jQuery en tirant la div et avec getElementById juste pour m'assurer qu'il n'y avait rien d'étrange avec le sélecteur jQuery. Vous trouverez ci-dessous un exemple fonctionnant sous Chrome:

<html>
<head>
<style type="text/css">
div {
    height: 50px;
    width: 50px;
    background-color: #2C7CC3;
}
</style>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script language="javascript">
$(document).ready(function() {
//var testdiv = document.getElementById("testdiv");
    html2canvas($("#testdiv"), {
        onrendered: function(canvas) {
            // canvas is the final rendered <canvas> element
            var myImage = canvas.toDataURL("image/png");
            window.open(myImage);
        }
    });
});
</script>
</head>
<body>
<div id="testdiv">
</div>
</body>
</html>
19
Joel Schlundt

Si vous voulez juste avoir la capture d'écran d'une div, vous pouvez le faire comme ça

html2canvas($('#div'), {
  onrendered: function(canvas) {
    var img = canvas.toDataURL()
    window.open(img);
  }
});
17
J.J. Kim

vous pouvez essayer ce code pour capturer un div Lorsque le div est très large ou décalé par rapport à l'écran

var div = $("#div")[0];
var rect = div.getBoundingClientRect();

var canvas = document.createElement("canvas");
canvas.width = rect.width;
canvas.height = rect.height;

var ctx = canvas.getContext("2d");
ctx.translate(-rect.left,-rect.top);

html2canvas(div, {
    canvas:canvas,
    height:rect.height,
    width:rect.width,
    onrendered: function(canvas) {
        var image = canvas.toDataURL("image/png");
        var pHtml = "<img src="+image+" />";
        $("#parent").append(pHtml);
    }
});
6
wang ye

Cela peut être facilement fait en utilisant html2canvas, essayez ce qui suit,

essayez d'ajouter le div à l'intérieur d'un modal html et appelez l'ID de modèle à l'aide d'une fonction jquery. Dans la fonction, vous pouvez spécifier la taille (hauteur, largeur) de l'image à afficher. Utilisation de modal est un moyen facile de capturer une div html dans une image dans un bouton.

par exemple, regardez l'exemple de code,

`

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">


            <div class="modal-body">
                <p>Some text in the modal.</p>

`

collez le div que vous souhaitez afficher dans le modèle. J'espère que ça va aider.

0
Thomas Martin

window.open n'a pas fonctionné pour moi ... juste une page vierge rendue ... mais j'ai pu faire apparaître le png sur la page en remplaçant le src attribut d'un élément img préexistant créé en tant que cible.

$("#btn_screenshot").click(function(){
     element_to_png("container", "testhtmltocanvasimg");
});


function element_to_png(srcElementID, targetIMGid){
    console.log("element_to_png called for element id " + srcElementID);
    html2canvas($("#"+srcElementID)[0]).then( function (canvas) {
        var myImage = canvas.toDataURL("image/png");
        $("#"+targetIMGid).attr("src", myImage);
                console.log("html2canvas completed.  png rendered to " + targetIMGid);
    });
}
<div id="testhtmltocanvasdiv" class="mt-3">
   <img src="" id="testhtmltocanvasimg">
</div>

Je peux alors faire un clic droit sur le png rendu et "enregistrer sous". L’utilisation de "l’outil de coupure" pour capturer l’élément est tout aussi simple, mais html2canvas est certainement un code intéressant!

0
user3232196