Search code examples
csspdfhtml2canvas

To take Screenshot of a div in a html page


I am trying to get the picture of a div in a html page using html2canvas. I am using this code

$('.classname').html2canvas({ 
                onrendered: function (canvas) { data1=canvas.toDataURL("image/png"); 

                var data = {
                    action: 'screen_response',
                    base64data: data1
                };


                $.post(ajaxurl, data, function(response) {
                    //document.getElementById('bar').style.display = 'none';
                    //alert("asdasd");
                });
                //alert(data1);

                } });

The image I am getting after this shows of size 1663*4205 .But when I open the image ,,it comes so small.. than i tried with jpg .. than i got to know that html2canvas actually scanning the whole page and generating a screenshot of whole html page . Please see this pic click here

white color is the div pic which i require .. and the black is the whole pic.

Please tell me how can i get the screenshot image of my div only. because i have import it in PDF too.


Solution

  • SOLUTION : I got the solution . include the newly released js files of html2canvas. It will work .