Convert div into downloadable Image
<p>This is the code which I am using to convert div into image and download that using html2canvas.js</p>

<pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://html2canvas.hertzen.com/build/html2canvas.js"&gt;&lt;/script&gt;
&lt;style&gt;
    #download{
        margin:10% 40%;
    }
    .download-btn{
        padding:10px;
        font-size:20px;
        margin:0 20px;
    }
    #test{
        background:#3399cc;
        padding:50px;
    }
    .x2{
        transform: scale(2,2);
    }
&lt;/style&gt;


   &lt;div id="download"&gt;
      &lt;h1 id="test"&gt;Testing Download&lt;/h1&gt;
   &lt;/div&gt;

    &lt;center&gt;
        &lt;button id="download-window" class="download-btn"&gt;New Window&lt;/button&gt;
        &lt;button id="download-png" class="download-btn"&gt;Download png&lt;/button&gt;
        &lt;button id="download-jpg" class="download-btn"&gt;Download jpg&lt;/button&gt;
        &lt;button id="download-pngx2" class="download-btn"&gt;Download pngx2&lt;/button&gt;
    &lt;/center&gt;


&lt;script&gt;
    $('#download-window').click(function(){

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

    $('#download-png').click(function(){

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

    $('#download-pngx2').click(function(){
         $('#download').addClass('x2');
            html2canvas($('#download'), 
             {
                onrendered: function (canvas) {
                var a = document.createElement('a');
                    a.href = canvas.toDataURL("image/png");       
                    a.download = 'image.png';
                    a.click();
                }
             });
        });

  $('#download-jpg').click(function(){
    html2canvas($('#download'), 
    {
      onrendered: function (canvas) {
        var a = document.createElement('a');
        // toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
        a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
        a.download = 'image.jpg';
        a.click();
      }
    });
  });
&lt;/script&gt;
</code></pre>

<p>Here image generated is not having good resolution.</p>

<p>Is there any other way to generate image with good resolution?</p>

<p>Can php function be used for doing this task?</p>