我正在尝试使用 PDF.js 阅读整个 .pdf 文档，然后在单个 Canvas 上呈现所有页面。

我的想法:将每个页面渲染到 Canvas 上并获取 ImageData (context.getImageData())，清除 Canvas 以执行下一页。我将所有 ImageData 存储在一个数组中，一旦所有页面都存储在其中，我想将数组中的所有 ImageData 放到一个 Canvas 上。

var pdf = null;
PDFJS.disableWorker = true;
var pages = new Array();
    //Prepare some things
    var canvas = document.getElementById('cv');
    var context = canvas.getContext('2d');
    var scale = 1.5;
    PDFJS.getDocument(url).then(function getPdfHelloWorld(_pdf) {
        pdf = _pdf;
        //Render all the pages on a single canvas
        for(var i = 1; i <= pdf.numPages; i ++){
            pdf.getPage(i).then(function getPage(page){
                var viewport = page.getViewport(scale);
                canvas.width = viewport.width;
                canvas.height = viewport.height;
                page.render({canvasContext: context, viewport: viewport});
                pages[i-1] = context.getImageData(0, 0, canvas.width, canvas.height);
                context.clearRect(0, 0, canvas.width, canvas.height);
                p.Out("pre-rendered page " + i);
            });
        }

    //Now we have all 'dem Pages in "pages" and need to render 'em out
    canvas.height = 0;
    var start = 0;
    for(var i = 0; i < pages.length; i++){
        if(canvas.width < pages[i].width) canvas.width = pages[i].width;
        canvas.height = canvas.height + pages[i].height;
        context.putImageData(pages[i], 0, start);
        start += pages[i].height;
    }
    });

所以根据我的理解，这应该可行，对吧？ 当我运行它时，我最终得到的 Canvas 足够大，可以包含 pdf 的所有页面，但不显示 pdf ...

谢谢你的帮助。

最佳答案

PDF 操作在所有阶段都是异步的。这意味着您还需要在最后一次渲染时捕捉 promise 。如果您没有捕捉到它，您将只会得到一个空白 Canvas ，因为在循环继续到下一页之前渲染尚未完成。

提示:我还建议您使用 getImageData 以外的东西，因为这将存储未压缩的位图，例如 data-uri，它是压缩数据。

这是一种略有不同的方法，它消除了 for 循环并为此目的更好地使用了 promise:

LIVE FIDDLE

var canvas = document.createElement('canvas'), // single off-screen canvas
    ctx = canvas.getContext('2d'),             // to render to
    pages = [],
    currentPage = 1,
    url = 'path/to/document.pdf';              // specify a valid url

PDFJS.getDocument(url).then(iterate);   // load PDF document

/* To avoid too many levels, which easily happen when using chained promises,
   the function is separated and just referenced in the first promise callback
*/

function iterate(pdf) {

    // init parsing of first page
    if (currentPage <= pdf.numPages) getPage();

    // main entry point/function for loop
    function getPage() {

        // when promise is returned do as usual
        pdf.getPage(currentPage).then(function(page) {

            var scale = 1.5;
            var viewport = page.getViewport(scale);

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

            var renderContext = {
                canvasContext: ctx,
                viewport: viewport
            };

            // now, tap into the returned promise from render:
            page.render(renderContext).then(function() {

                // store compressed image data in array
                pages.push(canvas.toDataURL());

                if (currentPage < pdf.numPages) {
                    currentPage++;
                    getPage();        // get next page
                }
                else {
                    done();           // call done() when all pages are parsed
                }
            });
        });
    }

}

当您随后需要检索页面时，您只需创建一个图像元素并将数据 uri 设置为源:

function drawPage(index, callback) {
    var img = new Image;
    img.onload = function() {
        /* this will draw the image loaded onto canvas at position 0,0
           at the optional width and height of the canvas.
           'this' is current image loaded 
        */
        ctx.drawImage(this, 0, 0, ctx.canvas.width, ctx.canvas.height);
        callback();          // invoke callback when we're done
    }
    img.src = pages[index];  // start loading the data-uri as source
}

由于图像加载本质上也是异步的，这就是我们需要回调的原因。如果您不想要异步性质，那么您也可以在上面的渲染 promise 中执行此步骤(创建和设置图像元素)来存储图像元素而不是数据 uris。

希望这对您有所帮助!

关于javascript - 使用 pdf.js 和 ImageData 将 .pdf 渲染到单个 Canvas，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15341010/