Можно ли кэшировать холсты?

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

Нет, данныеURI не «кэшируются» браузером, так как загрузка не включена. Что вы можете сделать, однако, чтобы хранить все ваши страницы в глобально доступном массиве, и проверить, если у вас уже есть, прежде чем позвонить 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>