-
-
Save ichord/9808444 to your computer and use it in GitHub Desktop.
<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> |
For viewport error, change as below:
`//var scale = 2;
//var viewport = page.getViewport(scale);
var viewport = page.getViewport({scale: 2});`
Otherwise works perfectly with pdfjs v2.2.228
Just to be precise you must explicitly call .promise for PDFJS.getDocument
PDFJS.getDocument(fileReader.result).promise.then(function getPdfHelloWorld(pdf) {
As well as what rushglen said (Removing var scale and then passing in the scale in the viewport declaration
var viewport = page.getViewport({scale: 2});
This is in response to libmysterion code for multiple page canvas (As PDFJS has updated the above two changes must be made for his example to work)
index.html:20 Uncaught ReferenceError: PDFJS is not defined
PDFJS Global object is deprecated please update the code thanks
I have a working example here
https://qutbi.amuslim.org/views.php?f=/books/0%20lat%20mi%20library/library/quran/quran-colored-hq.pdf
I can't get work any code above
Here is a working example of mine based on the the Mozilla's Hello World with document load error handling example:
<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 src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script type="text/javascript">
var pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';
//
// 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);
var loadingTask = pdfjsLib.getDocument(fileReader.result);
loadingTask.promise
.then(function (pdf) {
console.log('PDF loaded');
// Fetch the first page
var pageNumber = 1;
pdf.getPage(pageNumber).then(function (page) {
console.log('Page loaded');
var scale = 1.5;
console.log(page);
var viewport = page.getViewport({ scale: scale });
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
var renderTask = page.render(renderContext);
renderTask.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>
Not working with latest version of pdf.js.
promise
getter instead.Working with pdfjs v2.1.266 and below