Skip to content

Instantly share code, notes, and snippets.

@jdeng
Created February 11, 2015 02:54
Show Gist options
  • Save jdeng/cbfad9cb21e452127c81 to your computer and use it in GitHub Desktop.
Save jdeng/cbfad9cb21e452127c81 to your computer and use it in GitHub Desktop.
pdf to image using pdf.js
<html>
<body>
<script type="text/javascript" src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
<script type="text/javascript">
var url = "https://docs.google.com/document/export?format=pdf&id=1ML11ZyyMpnAr6clIAwWrXD53pQgNR-DppMYwt9XvE6s&token=AC4w5Vg7fSWH1Hq0SgNckx4YCvnGPaScyw%3A1423618416864";
var pages = [], heights = [], width = 0, height = 0, currentPage = 1;
var scale = 1.5;
function draw() {
var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
for(var i = 0; i < pages.length; i++)
ctx.putImageData(pages[i], 0, heights[i]);
document.body.appendChild(canvas);
}
PDFJS.disableWorker = true; // due to CORS
PDFJS.getDocument(url).then(function (pdf) {
getPage();
function getPage() {
pdf.getPage(currentPage).then(function(page) {
console.log("Printing " + currentPage);
var viewport = page.getViewport(scale);
var canvas = document.createElement('canvas') , ctx = canvas.getContext('2d');
var renderContext = { canvasContext: ctx, viewport: viewport };
canvas.height = viewport.height;
canvas.width = viewport.width;
page.render(renderContext).then(function() {
pages.push(ctx.getImageData(0, 0, canvas.width, canvas.height));
heights.push(height);
height += canvas.height;
if (width < canvas.width) width = canvas.width;
if (currentPage < pdf.numPages) {
currentPage++;
getPage();
}
else {
draw();
}
});
});
}
});
</script>
</body>
</html>
@vaghasiyaankur
Copy link

Hello sir,

I'm beginner in coding world..i'm applying this script for convert pdf to image, but unfortunately, it's wont work.

I see error in console like "PDFJS is not defined" even pdf.js is integrated. what's the solution for this..Please help me to move ahead.

Thanks in advance,
Ankur

@itamardavidyan
Copy link

itamardavidyan commented Jul 20, 2021

const convertDataUrlToFile = (dataUrl, filename) => {
    return fetch(dataUrl)
        .then(res => res.arrayBuffer())
        .then(buf => new File([buf], filename, { type: 'image/png' }))
};

const convertFiletoDataUrl = (file) => new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result.normalize());
    reader.onerror = error => reject(error);
});

const convertPdfPageToImage = (pdf, pageNumber, fileName) => new Promise(resolve => {
    pdf.getPage(pageNumber).then(page => {
        const viewport = page.getViewport({ scale: 1 });
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        const renderContext = { canvasContext: ctx, viewport: viewport };

        canvas.height = viewport.height;
        canvas.width = viewport.width;

        page.render(renderContext).promise.then(() => {
            const dataUrl   = canvas.toDataURL();
            convertDataUrlToFile(dataUrl, `${fileName}-${pageNumber}.png`).then(resolve);
        });
    });
})

const convertPdfFilesToImages = (files) => new Promise(resolve => {
    pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.js`;
    const worker = new pdfjsLib.PDFWorker();

    const promises = Array.from(Array(files.length), (_, index) => new Promise(resolve => {
        const file = files[index];

        if (file.type === 'application/pdf') {
            convertFiletoDataUrl(file).then(dataUrl =>
                pdfjsLib.getDocument({ url: dataUrl, worker }).promise.then(pdf => {
                    const promises = Array.from(Array(pdf.numPages), (_, index) => new Promise(resolve => {
                        const pageNumber = index + 1;
                        convertPdfPageToImage(pdf, pageNumber, file.name).then(resolve);
                    }));
                    Promise.all(promises).then(resolve);
                })
            );
        } else {
            resolve(file);
        }
    }));

    Promise.all(promises).then(files => resolve(files.flat()));
});

@agoalofalife
Copy link

@itamardavidyan this is good script and thanks a lot for that
but i couldn't use it because image quality is very bad🤔

@BartekKownacki
Copy link

@agoalofalife
In this line you can change scale to enchance quality :D

const viewport = page.getViewport({ scale: 1 });

e.g.
const viewport = page.getViewport({ scale: 4 });

@msankar1991
Copy link

Using angular how to use the above code?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment