是否可以缓存 canvas 页面？

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 页面呈现为 canvas。这样做的问题是，如果 pdf 文件包含大量文件，则需要花费一些时间。是否可以 cache/save 这些生成的文件在用户 computer/bowser 中，这样如果他第二次运行代码，他就不必再次生成它们，而是可以立即显示它们。

Answer 1

不，dataURI 不是 "cached" 浏览器，因为不涉及下载。但是，您可以做的是将所有页面存储到一个全局可访问的数组中，并在调用 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>

是否可以缓存 canvas 页面？

Is it possible to cache canvas pages?

javascript

caching

canvas

pdf.js