从pdf . js pdf转换为画布标签获得base64 png

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

本文关键字：pdf 标签 base64 png 转换 js 布标签      更新时间：2023-09-26

我正试图从画布中获得一个base64编码的png值，该画布是通过将pdf与Mozilla的pdf . js库转换而创建的。

所以我有一个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);
      });
    });

您没有等待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.
  });
  ...
相关文章：