PDF.js获取一页图像并将其显示为HTML

Question

据此：[Extract images from PDF file with JavaScript

我试图从PDF过滤JPEG图像。它以一种方式工作，即获得数组中一页图像的名称。

我要做什么：将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);
}