Получение base64 png из PDF.JS pdf, преобразованного в тег canvas?

Question

Я пытаюсь получить значение png, закодированное base64, из холста, которое было создано путем преобразования PDF-файла в библиотеку PDF.JS Mozilla.

Так что у меня был файл с кодировкой base64, который я преобразовал в HTML-холст. Теперь мне нужно преобразовать этот холст HTML в значение png, закодированное в base64, которое я могу использовать с тегом HTML img, который отображается правильно.

Я пробовал HTMLCanvasElement.toDataURL(), однако он ничего не отображает. Я попытался использовать тот же метод с некоторыми зелеными полями, сделанными в холсте, и он отлично работал, что означает, что преобразованный в basevas файл с кодировкой base64 просто не хочет работать с этим методом.

Любые другие решения или обходной путь для решения, которое я пробовал?

** Мне нужно сделать это в моем JS-коде с моим HTML.

function convertDataURIToBinary() { 
     var raw = window.atob(BASE64 OF PDF); 
     var rawLength = raw.length; 
     var array = new Uint8Array(new ArrayBuffer(rawLength)); 

     for(var i = 0; i < rawLength; i++) { 
     array[i] = raw.charCodeAt(i); 
     } 
     return array; 
    } 
    var pdfAsArray = convertDataURIToBinary(); 

    PDFJS.workerSrc = "http://mozilla.github.io/pdf.js/build/pdf.worker.js"; 
    var canvas = _el.querySelector(".insertHere"); 
    PDFJS.getDocument(pdfAsArray).then(function getPdfHelloWorld(pdf) { 
     pdf.getPage(1).then(function getPageHelloWorld(page) { 
     var scale = 1.5; 
     var viewport = page.getViewport(scale); 


     var context = canvas.getContext("2d"); 
     canvas.height = viewport.height; 
     canvas.width = viewport.width; 

     var renderContext = { 
      canvasContext: context, 
      viewport: viewport 
     }; 
     page.render(renderContext); 
     canvas = _el.querySelector(".insertHere"); 
     var imgSrc = canvas.toDataURL("image/png"); 
     var img = new Image(); 
     img.src = imgSrc; 
     _el.querySelector(".insertImageLabel").appendChild(img); 

     }); 
    }); 

Answer 1

Вы не ожидаете обещанного render() для выполнения операции async. См. https://github.com/mozilla/pdf.js/blob/master/examples/learning/prevnext.html#L76 как подождать по завершении:

... 
    var renderTask = page.render(renderContext); 
    // Wait for rendering to finish 
    renderTask.promise.then(function() { 
    // Page rendered, now take snapshot. 
    }); 
    ...