JSFiddle - React, Tailwind, and code Playground

by ganesh095

HTML

<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.2.2/purify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.0/jspdf.umd.min.js"></script>
<!doctype html>
<html>
 
 <body>
  <h1>Take screenshot of webpage</h1>
  <div class="container" id='container' >
   <img src='https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/BGLG_S06/on/demandware.static/-/Sites-BanfieldStorefront-Library/default/dw90175640/images/homepage-banfield/cat-llooking-at-camera.jpg' id="imageid" width='200' height='100'>
   
  </div>
  <input type='button' id='but_screenshot' value='Download PDF' onclick='downloadpdf();'><br/>

  <!-- Script -->
  <script type='text/javascript'>
  var jsPDF = window.jspdf.jsPDF;
  function downloadpdf(){
    var doc = new jsPDF({ orientation: 'p', format: 'a4', unit: 'pt'});
		getBase64Image(document.getElementById("imageid").src, function(base64image){
			 console.log(base64image);
       document.getElementById("imageid").src = "data:image/png;base64," + base64image;
       doc.html(document.body, 				{
            callback: function (doc) {
              doc.save('sample-file.pdf');
              },
              x: 10,
              y: 10,
              width: 595,
              windowWidth: 595,
              html2canvas: {
              	allowTaint : false,
              	useCORS: true
              }

          });
		});
		
		
  }
  function getBase64Image(imgUrl, callback) {
    var img = new Image();
    // onload fires when the image is fully loadded, and has width and height
    img.onload = function(){
      var canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0);
      var dataURL = canvas.toDataURL("image/png"),
      dataURL = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
     ...