从转换为画布标签的 PDF.JS pdf 获取 base64 png？

Question

我正在尝试从画布中获取 base64 编码的 png 值，该画布是通过使用 Mozilla 的 PDF.JS 库转换 pdf 而创建的。

所以我有一个 base64 编码的 PDF，我将它转换为 HTML 画布。我现在需要将该 HTML 画布转换为 base64 编码的 png 值，我可以将其与正确显示的 HTML img 标记一起使用。

我尝试了 HTMLCanvasElement.toDataURL()，但它没有显示任何内容。我尝试使用相同的方法在画布中绘制一些绿色框，并且效果很好，这意味着转换为画布的 base64 编码 pdf 不想使用该方法。

我尝试过的解决方案是否有任何其他解决方案或解决方法？

**我需要在我的 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() 返回的承诺来完成异步操作。看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.
  });
  ...