Open PDF and save as image

by Evan Sharp

HTML

<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>

<input type="file" name="attachment" id="attachment" />

<img id="img" />

Babel + JSX

document.getElementById('attachment').addEventListener('change', event => {
  unlockPdf(event.target.files[0], '', window.prompt.bind(window, 'There is a password, what is it?'));
});

// Loaded via <script> tag, create shortcut to access PDF.js exports.
var pdfjs = window['pdfjs-dist/build/pdf'];

// The workerSrc property shall be specified.
pdfjs.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';

// ---------------------------------------------------------------------------------------

function unlockPdf(file, password, promptCallback) {
  const reader = new FileReader();
  reader.onload = e => getPdf(file, e.target.result, password, promptCallback)
  reader.readAsArrayBuffer(file);
}

function getPdf(original, data, password, promptCallback) {
  const loadingTask = pdfjs.getDocument({
    data,
    password
  });
  
  return loadingTask.promise.then(pdf => {
      console.log(`PDF loaded successfully ${password ? 'with' : 'without'} a password.`);
      if (!password) return original;
      
      const size = {height: 0, width: 0};
      const scale = 1.5;
      
      // pdf.js had some issues rendering the pages in parallel, so this does them in serial.
      return new Array(pdf.numPages).fill('').reduce((promise , x, curPage) => pdf.getPage(curPage + 1).then(page => {
          console.log('Page loaded', curPage + 1);
          const viewport = page.getViewport(scale);
          
          size.height += viewport.height;
          size.width = size.width > viewport.width ? size.width : viewport.width;
          
          const canvas = document.createElement('canvas');
      		const canvasCtx = canvas.getContext('2d');
          canvas.height = viewport.height;
        	canvas.width = viewport.width;

          return Promise.resolve(promise).then(results => page.render({
              canvasContext: canvasCtx,
              viewport
            })
            .then(() => {
              console.log('Page rendered');
   ...