-
-
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> |
@ershadow786 you can create the canvas with style=display:none attribute and in the img do this:
<img src=canvas.toDataURL()>
Warning pseudo code!
Instead of rendering a page to a canvas, is it possible to extract a page and then save it to a new PDF document, or stream the one page?
The use case I am trying to solve is splitting up a multiple page pdf document into its component pages and then using pdfkit.js to manipulate the extracted page?
e.g. is there a page.save or page.stream method?
How can I do if i have a link <a href="myfile.pdf" target="_blank" id="pdf">myfile.pdf</a> onclick this will open a PDF in new tab? and it should be converted into image
for (i = 1; i <= pdf.numPages; i++){
pdf.getPage(i).then(function getPageHelloWorld(page) {
it's not working.can anyone give better solution
Maybe learn how to program?
Anyone landing here trying to render an entire PDF document to to a single canvas...
You cant!
You need to use something like above to render individually before gluing all the resulting canvas together:
<html>
<body>
<input id='pdf' type='file'/>
<!-- Use latest PDF.js build from Github -->
<script type="text/javascript" src="https://rawgit.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
<script type="text/javascript">
window.PDFJS = window.pdfjsLib;
//
// 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)
const go = async function(){
let h = 0;
for(var pageN = 1; pageN <= pdf.numPages; pageN++){
const page = await pdf.getPage(pageN);
console.log('got a page', pageN);
var scale = 2;
var viewport = page.getViewport(scale);
//
// Prepare canvas using PDF page dimensions
//
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
var context = canvas.getContext('2d');
canvas.height += viewport.height;
canvas.width = viewport.width;
h+= viewport.height;
//
// Render PDF page into canvas context
//
var task = page.render({ canvasContext: context, viewport: viewport })
await task.promise;
// console.log(canvas.toDataURL('image/jpeg'));
}
//
// Now just add super-glue!
//
const canvi = document.querySelectorAll('canvas');
const totalHeight = Array.prototype.reduce.call(canvi, (height, canvas) => height + canvas.height, 0);
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.height = totalHeight;
canvas.width = canvi[0].width;
let y= 0;
canvi.forEach((src, e) => {
context.drawImage(src, 0, y);
y+=src.height;
});
document.body.innerHTML = ''; // lazily delete the other canvi
document.body.appendChild(canvas);
};
go();
}, function(error){
console.log(error);
});
};
fileReader.readAsArrayBuffer(file);
}
}
</script>
</body>
</html>
const go = async function() is not including in working even await task.promise; kindly help me
Not working with latest version of pdf.js.
- Deprecated API usage: PDFDocumentLoadingTask.then method, use the
promisegetter instead. - Deprecated API usage: getViewport is called with obsolete arguments.
Working with pdfjs v2.1.266 and below
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>
is it necessary to use canvas pdf js convert pdf to images can't directly show it in img tag insteaad of canvas?