是否可以缓存画布页面？

Question

我正在使用http://jsfiddle.net/epistemex/LUNaJ/ 中的代码

PDFJS.disableWorker = true; // due to CORS

var canvas = document.createElement('canvas'), // single off-screen canvas
    ctx = canvas.getContext('2d'),             // to render to
    pages = [],
    currentPage = 1,
    url = 'http://www.corsproxy.com/www.ohio.edu/technology/training/upload/Java-Script-Reference-Guide.pdf';

PDFJS.getDocument(url).then(function (pdf) {

    PROGRESS.max = pdf.numPages; // just for demo
    PROGRESS.value = 1; // just for demo

    // 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++;
                    PROGRESS.value = currentPage; // just for demo
                    getPage();        // get next page
                }
                else {
                    done();           // call done() when all pages are parsed
                }
            });
        });
    }
});

function done() {
    // NOTE: Just for demo - correct order is not guaranteed here
    // as the drawPage is async. use same method as above to make
    // sure the order is correct (not for-loop, but use the callback
    // to get next page). To present a single page it won't be
    // a problem though... (just use drawPage() directly)
    for(var i = 0; i < pages.length; i++) {
        drawPage(i, addPage);
    }
}

function addPage(img) {
    img.style.width = '100px';
    img.style.height = '120px';
    document.body.appendChild(img);
}

function drawPage(index, callback) {
    var img = new Image;
    img.onload = function() {
        ctx.drawImage(this, 0, 0, ctx.canvas.width, ctx.canvas.height);
        callback(this);          // invoke callback when we're done
    }
    img.src = pages[index];  // start loading the data-uri as source
}

将 pdf 页面渲染到画布。 这样做的问题是，如果 pdf 文件有大量文件，则需要很长时间。 是否可以在用户计算机/浏览器中缓存/保存这些生成的文件，以便如果他第二次运行代码，他不必再次生成它们，而是可以立即显示它们。

Answer 1

不，dataURI 不会被浏览器“缓存”，因为不涉及下载。 但是，您可以做的是将所有页面存储到一个全局可访问的数组中，并在调用PDFJS.getDocument(url)之前检查您是否已经拥有它：

 PDFJS.disableWorker = true; // due to CORS var canvas = document.createElement('canvas'), // single off-screen canvas ctx = canvas.getContext('2d'), // to render to docs = {}, // an object that will store our pdf documents urls = ["https://www.ohio.edu/technology/training/upload/html-tag-reference-guide.pdf", "https://www.ohio.edu/technology/training/upload/Java-Script-Reference-Guide.pdf"]; btn0.onclick = getDoc; btn1.onclick = getDoc; function getDoc() { // get the doc's url var url = urls[+this.id.split('btn')[1]]; // clear the result div result.innerHTML = ''; // we already have it if (docs[url]) { // simply call the callback done(docs[url]); } else { // create our array for this document docs[url] = []; // download and parse the doc PDFJS.getDocument(url).then(function(pdf) { PROGRESS.max = pdf.numPages; // just for demo PROGRESS.value = 1; // just for demo var currentPage = 1; // 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 docs[url].push(canvas.toDataURL()); if (currentPage < pdf.numPages) { currentPage++; PROGRESS.value = currentPage; // just for demo getPage(); // get next page } else { done(docs[url]); // call done() when all pages are parsed } }); }); } }); } } function done(pages) { for (var i = 0; i < pages.length; i++) { drawPage(pages[i], addPage); } } function addPage(img) { img.style.width = '100px'; img.style.height = '120px'; result.appendChild(img); } function drawPage(dataURI, callback) { var img = new Image; img.onload = function() { ctx.drawImage(this, 0, 0, ctx.canvas.width, ctx.canvas.height); callback(this); // invoke callback when we're done } img.src = dataURI; // start loading the data-uri as source }

 #PROGRESS { width: 100% }

 <script src="https://rawgit.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script> <button id="btn0">1st Doc</button> <button id="btn1">2nd Doc</button> <progress id="PROGRESS" value=0></progress> <div id="result"></div>