从 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() 返回的承诺来完成异步操作。请参阅 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.
  });
  ...

从 PDF.JS pdf 转换为 canvas 标签获取 base64 png？

Getting a base64 png from a PDF.JS pdf converted to a canvas tag?

javascript

html

pdf

canvas

pdf.js