PDF.js получает изображения одной страницы и отображает их как HTML - PullRequest
Новая
       10

PDF.js получает изображения одной страницы и отображает их как HTML

0 голосов
/ 29 августа 2018

в соответствии с этим: [ Извлечение изображений из файла PDF с помощью JavaScript

Я пытался отфильтровать изображения JPEG из PDF. Это работает так, что я получаю имя изображения одной страницы в массиве.

Что я хочу сделать: отобразить изображения рядом с PDF в формате HTML. Упомянутое выше решение не работает, я не знаю, как получить само изображение, а не только имя. 

<script type="text/javascript" src="pdf.js"></script>
<script type="text/javascript">
    PDFJS.workerSrc = "/path/to/pdf.worker.js";
</script>

<div>
    <button id="prev">Previous</button>
    <button id="next">Next</button>
    <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
</div>

<canvas id="the-canvas" style="width: 500px;"></canvas>


<div id="images"></div>

<script type="text/javascript">
    PDFJS.workerSrc = "pdf.worker.js";
</script>

<script src="js.js"></script>

js.js: 

// URL of PDF document
var url = "test/pdf_one.pdf";
var pageNum = 11;
var pageCount = 0;

loadPage(pageNum);


function loadPage(number){
    // Asynchronous download PDF
    PDFJS.getDocument(url)
        .then(function(pdf) {
            pageCount = pdf.numPages;
            document.getElementById("page_num").innerHTML = "" + pageNum;
            document.getElementById("page_count").innerHTML = "" + pageCount;
            return pdf.getPage(number);
        })
        .then(function(page) {
            // Set scale (zoom) level
            var scale = 1.5;

            // Get viewport (dimensions)
            var viewport = page.getViewport(scale);

            // Get canvas#the-canvas
            var canvas = document.getElementById('the-canvas');

            // Fetch canvas' 2d context
            var context = canvas.getContext('2d');

            // Set dimensions to Canvas
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            // Prepare object needed by render method
            var renderContext = {
                canvasContext: context,
                viewport: viewport
            };

            // Render PDF page
            page.render(renderContext);

            getImages(page);
        });

}

function getImages(page){

    var test = [];
    page.getOperatorList().then(function (ops) {
        for (var i=0; i < ops.fnArray.length; i++) {
            if (ops.fnArray[i] == PDFJS.OPS.paintJpegXObject) {
               console.log(ops.argsArray[i][0]);
                document.getElementById("images").innerHTML = "<img src='"+ops.argsArray[i][0]+".jpg'>";
                test.push(ops.argsArray[i][0])
            }
        }
    });

    console.log(test);

    if(pageNum === 13){
        console.log("IMAGES");
        console.log(test[0]);
        document.getElementById("images").innerHTML = "<img src='"+test[0]+".jpg'>";

    }


}


document.getElementById('prev').addEventListener('click', onPrevPage);
document.getElementById('next').addEventListener('click', onNextPage);

function onNextPage() {
    if (pageNum >= pageCount) {
        return;
    }
    pageNum++;
    document.getElementById("page_num").innerHTML = "" + pageNum;
    loadPage(pageNum);
}
function onPrevPage() {
    if (pageNum <= 1) {
        return;
    }
    pageNum--;
    document.getElementById("page_num").innerHTML = "" + pageNum;
    loadPage(pageNum);
}
...