urkle/pdfjs_render_to_canvas.html

## pdfjs_render_to_canvas.html
<!DOCTYPE html>
<html>
<body>
  <canvas id="the-canvas" style="border:1px solid black"></canvas>
  <input id='pdf' type='file'/>

  <script type="importmap">
    {
      "imports": {
        "pdf": "https://mozilla.github.io/pdf.js/build/pdf.mjs",
        "pdfWorker": "https://mozilla.github.io/pdf.js/build/pdf.worker.mjs"
      }
    }
  </script>


  <script type="module">
    import * as pdfJS from 'pdf';
    import * as pdfWorker from 'pdfWorker';
    //
    // preload the pdf worker to avoid yet another cross-origin issue (workers need the URL of
    // the script to be loaded, and dynamically loading a cross-origin script does
    // not work)
    //
    //pdfJS.GlobalWorkerOptions.workerSrc = pdfWorker;
    globalThis.pdfjsWorker = pdfWorker;
    window.pdfJS = pdfJS;

    async function loadPdf(doc) {
      const pdf = await pdfJS.getDocument(doc).promise;
      //
      // Fetch the first page
      //
      const page = await pdf.getPage(1);
      const scale = 1.5;
      const viewport = page.getViewport({ scale });

      //
      // Prepare canvas using PDF page dimensions
      //
      const canvas = document.getElementById('the-canvas');
      const context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;

      //
      // Render PDF page into canvas context
      //
      await page.render({canvasContext: context, viewport: viewport}).promise;

      console.log(canvas.toDataURL('image/jpeg'));
    }

    //
    // Asynchronous download PDF as an ArrayBuffer
    //
    const pdf = document.getElementById('pdf');
    pdf.onchange = function(ev) {
      let file;
      if (file = document.getElementById('pdf').files[0]) {
        const fileReader = new FileReader();
        fileReader.onload = (ev) => {
            loadPdf(fileReader.result);
        };
        fileReader.readAsArrayBuffer(file);
      }
    };
  </script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<body>
	<canvas id="the-canvas" style="border:1px solid black"></canvas>
	<input id='pdf' type='file'/>

	<script type="importmap">
	{
	"imports": {
	"pdf": "https://mozilla.github.io/pdf.js/build/pdf.mjs",
	"pdfWorker": "https://mozilla.github.io/pdf.js/build/pdf.worker.mjs"
	}
	}
	</script>



	<script type="module">
	import * as pdfJS from 'pdf';
	import * as pdfWorker from 'pdfWorker';
	//
	// preload the pdf worker to avoid yet another cross-origin issue (workers need the URL of
	// the script to be loaded, and dynamically loading a cross-origin script does
	// not work)
	//
	//pdfJS.GlobalWorkerOptions.workerSrc = pdfWorker;
	globalThis.pdfjsWorker = pdfWorker;
	window.pdfJS = pdfJS;

	async function loadPdf(doc) {
	const pdf = await pdfJS.getDocument(doc).promise;
	//
	// Fetch the first page
	//
	const page = await pdf.getPage(1);
	const scale = 1.5;
	const viewport = page.getViewport({ scale });

	//
	// Prepare canvas using PDF page dimensions
	//
	const canvas = document.getElementById('the-canvas');
	const context = canvas.getContext('2d');
	canvas.height = viewport.height;
	canvas.width = viewport.width;

	//
	// Render PDF page into canvas context
	//
	await page.render({canvasContext: context, viewport: viewport}).promise;

	console.log(canvas.toDataURL('image/jpeg'));
	}

	//
	// Asynchronous download PDF as an ArrayBuffer
	//
	const pdf = document.getElementById('pdf');
	pdf.onchange = function(ev) {
	let file;
	if (file = document.getElementById('pdf').files[0]) {
	const fileReader = new FileReader();
	fileReader.onload = (ev) => {
	loadPdf(fileReader.result);
	};
	fileReader.readAsArrayBuffer(file);
	}
	};
	</script>

	</body>
	</html>