javascript - 从 PDF.JS pdf 转换为 Canvas 标签获取 base64 png？

Question

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

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

我尝试了 HTMLCanvasElement.toDataURL()，但它没有显示任何内容。我尝试使用相同的方法在 Canvas 上绘制一些绿色框，效果很好，这意味着转换为 Canvas 的 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() 返回的 promise 来完成异步操作。请参阅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.
  });
  ...