是否可以缓存画布页面

Is it possible to cache canvas pages?

本文关键字：布页面 缓存 是否      更新时间：2023-09-26

我正在使用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文件有大量文件，则需要很长时间。是否有可能将这些生成的文件缓存/保存在用户的计算机/浏览器中，以便当他第二次运行代码时，他不必再次生成它们，而是可以立即显示它们。

不，因为没有涉及下载，所以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>

相关文章：