CODEWITHSUNDEEP
javascripthtmlcsshtml2canvas
User1493
User1493

Reputation: 491

how to improve the quality of a `html2canvas` screen capture?

I have used the following html2canvas code to take screenshots and download it.

html button creation

<button class="btn btn-default btn-sm" style="margin:0px 0px -10px 970px; padding:2px 4px 1px 4px" onclick="genScreenshot()"><span class="glyphicon glyphicon-envelope"></span></button>
<a id="test"></a>
<div id="box1"></div>

function definition

<script type="text/javascript">                         
function genScreenshot() {
html2canvas(document.body, {
  onrendered: function(canvas) {
  $('#box1').html("");

  if (navigator.userAgent.indexOf("MSIE ") > 0 || 
                navigator.userAgent.match(/Trident.*rv\:11\./)) 
       {
    var blob = canvas.msToBlob();
    window.navigator.msSaveBlob(blob,'Test file.png');
       }
  else {
    $('#test').attr('href', canvas.toDataURL("image/png"));
    $('#test').attr('download','screenshot.png');
    $('#test')[0].click();
       }
                                }
                              });
                          }  
</script>

But the quality of the downloaded screenshot is not that good. How can improve its quality?

Upvotes: 0

Views: 2824

Answers (1)

Tashi
Tashi

Reputation: 683

How about something like this:

var $wrapper = $("#yourDiv");
setSize($wrapper, "2000px", "20pt");

html2canvas($wrapper, {
    onrendered: function (canvas) {
        var a = document.createElement('a');
        a.href = canvas.toDataURL("image/jpg");
        a.download = 'filename.jpg';
        a.click();

        setSize($wrapper, "1000px", "10pt");
    }
});

function setSize(dv, width, fontsize) {
    dv[0].style.width = width;
    dv[0].style.fontSize = fontsize;
}

This resizes the div and font to bigger size and then shrinks back afterwards.

Upvotes: 1

Related Questions