demo of using pdf.js to extract pages to images
<script src="http://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing-api.min.js"></script><html> | |
<!-- | |
Created using jsbin.com | |
Source can be edited via http://jsbin.com/pdfjs-helloworld-v2/8598/edit | |
--> | |
<body> | |
<canvas id="the-canvas" style="border:1px solid black"></canvas> | |
<input id='pdf' type='file'/> | |
<!-- Use latest PDF.js build from Github --> | |
<script type="text/javascript" src="https://rawgithub.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script> | |
<script type="text/javascript"> | |
// | |
// Disable workers 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.disableWorker = true; | |
// | |
// Asynchronous download PDF as an ArrayBuffer | |
// | |
var pdf = document.getElementById('pdf'); | |
pdf.onchange = function(ev) { | |
if (file = document.getElementById('pdf').files[0]) { | |
fileReader = new FileReader(); | |
fileReader.onload = function(ev) { | |
console.log(ev); | |
PDFJS.getDocument(fileReader.result).then(function getPdfHelloWorld(pdf) { | |
// | |
// Fetch the first page | |
// | |
console.log(pdf) | |
pdf.getPage(1).then(function getPageHelloWorld(page) { | |
var scale = 1.5; | |
var viewport = page.getViewport(scale); | |
// | |
// Prepare canvas using PDF page dimensions | |
// | |
var canvas = document.getElementById('the-canvas'); | |
var context = canvas.getContext('2d'); | |
canvas.height = viewport.height; | |
canvas.width = viewport.width; | |
// | |
// Render PDF page into canvas context | |
// | |
var task = page.render({canvasContext: context, viewport: viewport}) | |
task.promise.then(function(){ | |
console.log(canvas.toDataURL('image/jpeg')); | |
}); | |
}); | |
}, function(error){ | |
console.log(error); | |
}); | |
}; | |
fileReader.readAsArrayBuffer(file); | |
} | |
} | |
</script> | |
<style id="jsbin-css"> | |
</style> | |
<script> | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment