title: Converting Image to PDF(shrinkage/one page getting loaded)
body: <blockquote>
    <p>Please do not mark this as duplicate, because I have tried many
    things written on StackOverflow/Google &amp; things did not work out.</p>
  </blockquote>
  
  <p><strong><em>My requirement</em></strong>:</p>
  
  <p>Convert HTML div to Image &amp; the convert Image to PDF.
  So currently I am able to convert HTML div to Image &amp; partially successful in converting that Image to PDF.</p>
  
  <p>I am using <strong>JsPDF</strong> for conversion of Image to PDF.</p>
  
  <p>Below is the code I have 2 cases:</p>
  
  <ol>
  <li>Where pdf is getting generated, but Image is very shrunk.</li>
  <li>Where there is no shrinkage, but only one page is getting generated.</li>
  </ol>
  
  <p>Below I have shared images of both these cases..!!!</p>
  
  <p>Plz, help me with this issue.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script type="text/javascript"&gt;
   $(document).ready(function () {
    setTimeout(function(){
     downloadImage();
    },1000)
   });
   
   var base64 = "";
   function downloadImage(){
  
    //Case 1: Where the image gets shrinked.
       html2canvas(document.querySelector("#dvContainer")).then(canvas =&gt; {
    a = document.createElement('a'); 
    document.body.appendChild(a); 
    base64 = canvas.toDataURL();
    var doc = new jsPDF();
       var image = base64;
       doc.addImage(image, 'JPEG', 10, 10, 180, 160);
       doc.save('Report');
   }); 
  
    //Case 2: Where only 1 page gets loaded.
          html2canvas(document.querySelector("#dvContainer")).then(canvas =&gt; {
       a = document.createElement('a'); 
    document.body.appendChild(a); 
    base64 = canvas.toDataURL(wid = canvas.width, hgt = canvas.height);
    var doc = new jsPDF('p','pt','a4');
    var image = base64;
    var hratio = hgt/wid;
    var width = doc.internal.pageSize.width;    
          var height = width * hratio;
       doc.addImage(image, 'JPEG',20,20, width, height);
       doc.save('Report');
   }); 
   }
    
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/5VegA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5VegA.png" alt="CASE 1"></a>
  <a href="https://i.stack.imgur.com/x0boL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/x0boL.png" alt="CASE 2"></a></p>