Javascript js获取一个页面的图像并将其显示为HTML

据此：[

我尝试从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>

PDFJS.workerSrc=“/path/to/pdf.worker.js”；
以前的
下一个
页码：/
PDFJS.workerSrc=“pdf.worker.js”；

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);
}

//PDF文档的URL
var url=“test/pdf\u one.pdf”；
var-pageNum=11；
var pageCount=0；
加载页面（pageNum）；
功能加载页（编号）{
//异步下载PDF
PDFJS.getDocument（url）
。然后（函数（pdf）{
pageCount=pdf.numPages；
document.getElementById（“page_num”）.innerHTML=“”+pageNum；
document.getElementById（“页面计数”）.innerHTML=”“+pageCount；
返回pdf.getPage（编号）；
})
.then（功能）（第页）{
//设置缩放级别
var标度=1.5；
//获取视口（尺寸）
var viewport=page.getViewport（比例）；
//获取画布#画布
var canvas=document.getElementById（'the-canvas'）；
//获取画布的二维上下文
var context=canvas.getContext（'2d'）；
//将维度设置为画布
canvas.height=viewport.height；
canvas.width=viewport.width；
//准备渲染方法所需的对象
var renderContext={
背景：背景，
视口：视口
};
//呈现PDF页面
page.render（renderContext）；
获取图像（第页）；
});
}
函数getImages（第页）{
var检验=[]；
page.getOperatorList（）.then（函数（ops）{
对于（变量i=0；i=pageCount）{
返回；
}
pageNum++；
document.getElementById（“page_num”）.innerHTML=“”+pageNum；
加载页面（pageNum）；
}
函数onPrevPage（）{
如果（pageNum
ops.argsArray[index]
仅返回以下数组：imageName（0）、imageWidth（1）和imageHeight（2），则应调用
page.objs.get（imageName，function（img）{console.log（'image url'，img.src）}