title: Convert div into downloadable Image
body: <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>