Question

我试图从通过Mozilla将PDF文件转换为PDF.JS库而创建的画布中获取base64编码的png值。

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

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

我尝试过的解决方案还有其他解决方案或解决方法吗？

**我需要使用我的HTML在我的JS代码中执行此操作。

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.
  });
  ...

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

1 个答案: