JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js" integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ==" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<input type="file" id="fileupload">
<canvas id="the-canvas"></canvas>

JavaScript

$(document).ready(function () {
  $('#fileupload').change(function () {
    if (this.files && this.files[0]) {
      var reader = new FileReader();

      reader.onload = (function(reader) {
        return function() {
          var contents = reader.result;
          var loadingTask = pdfjsLib.getDocument(contents);

          loadingTask.promise.then(function(pdf) {
            pdf.getPage(1).then(function(page) {
              var canvas = document.getElementById('the-canvas');

              var viewport = page.getViewport({
                scale: 1,
              });

              canvas.height = viewport.height;
              canvas.width = viewport.width;
              var context = canvas.getContext('2d');
              var renderContext = {
                canvasContext: context,
                viewport: viewport
              };
              page.render(renderContext)

              var img = new Image();
              img.src = canvas.toDataURL("image/jpg");
              document.body.appendChild(img);

            });
          });
        }
      })(reader);
      reader.readAsDataURL(this.files[0]);
    }
  })
})