将 PDF 加载到 fabricjs canvas

Question

我有一个 fabricjs canvas，我需要输入 PDF，类似于图像的加载方式。我希望在加载到 canvas 之前需要通过 PDFjs 将 PDF 转换为 PNG？

    document.getElementById('imgLoader').onchange = function handleImage(e) {
    var reader = new FileReader();
    reader.onload = function (event) {
        console.log('fdsf');
        var imgObj = new Image();
        imgObj.src = event.target.result;
        imgObj.onload = function () {
            var image = new fabric.Image(imgObj);
            image.set({
                left: 320,
                top: 5,
            });
            canvas.add(image);
        }
    }
    reader.readAsDataURL(e.target.files[0]);
}

我只是不确定该怎么做。

Answer 1

为了解决这个问题，我使用 PDF.js 将 PDF 转换为 PNG 并存储 toDataURL，然后检索 PNG 图像 fromURL 并设置为背景。

document.querySelector("#pdf-upload").addEventListener("change", function(e) {
  var file = e.target.files[0]
  if (file.type != "application/pdf") {
    console.error(file.name, "is not a pdf file.")
    return
  }

  var fileReader = new FileReader();

  fileReader.onload = function() {
    var typedarray = new Uint8Array(this.result);

    PDFJS.getDocument(typedarray).then(function(pdf) {
      // you can now use *pdf* here
      console.log("the pdf has ", pdf.numPages, "page(s).")
      pdf.getPage(pdf.numPages).then(function(page) {
        // you can now use *page* here
        var viewport = page.getViewport(2.0);
        var canvasEl = document.querySelector("canvas")
        canvasEl.height = viewport.height;
        canvasEl.width = viewport.width;

        page.render({
          canvasContext: canvasEl.getContext('2d'),
          viewport: viewport
        }).then(function() {

          var bg = canvasEl.toDataURL("image/png");

          fabric.Image.fromURL(bg, function(img) {
            img.scaleToHeight(1123);
            canvas.setHeight(1123);
            canvas.setWidth(1588);
            canvas.setBackgroundImage(img);
          });
          canvas.renderAll();
        });
      });

    });
  };
  fileReader.readAsArrayBuffer(file);
});

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/1.8.349/pdf.min.js"></script>
</head>

<body>
  <span style="font-size: 14px"><b>Load PDF</b></span>
  <input id="pdf-upload" type="file">

  <canvas id="pdfcanvas"></canvas>
</body>

将 PDF 加载到 fabricjs canvas

Load PDF into fabricjs canvas

fabricjs

pdf.js