4

仕事

ページにキャンバスを <canvas id="pdfCanvas"> 作成し、既存のキャンバスのファブリック キャンバスを作成し ますnew fabric.Canvas("pdfCanvas"); 。mouse.down、mouse.up、mouse.move メソッドを使用して、長方形を描画できるようにします。PDF.js ブラウザを使用して、上記のキャンバス「pdfCanvas」で PDF をレンダリングします。レンダリングされた PDF が表示されるようになりました。 PDFに長方形を描画すると、レンダリングされたキャンバスが非表示になりますが、オブジェクトは描画されます

問題

問題を確認するためのフィドルは次のとおり です。 -上記のhttps://jsfiddle.net/hiitskiran/wgz8qore/2/を実行します。ファブリックオブジェクト

4

1 に答える 1

9

あなたのフィドルから私が見るのは、page.renderメソッドの結果を待たないことです。これは非同期です。残念ながら、を待つとpage.render、fabric.canvas インスタンスが以前に満たされたキャンバスを消去し、何もできません。このため。だから私は別のアプローチを試しました: まず、pdf.jspage.renderメソッドを待ってから、以前に塗りつぶされたキャンバスの .toDataURL を呼び出して、古いコンテンツのコピーを取得できるようにし、以前に塗りつぶされたキャンバスを背景として設定します。新しい fabric.canvas を完成させて、長方形を描きます。

var url = 'http://www.africau.edu/images/default/sample.pdf';
var canvas = document.getElementById('pdfcanvas');
var context = canvas.getContext('2d');
PDFJS.disableWorker = true;
PDFJS.getDocument(url).then(function(pdf) {
  pdf.getPage(1).then(function(page) {
    var scale = 1.5;
    var viewport = page.getViewport(scale);
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    page.render({
      canvasContext: context,
      viewport: viewport
    }).then(function() {

      var bg = canvas.toDataURL("image/png");
      var fcanvas = new fabric.Canvas("pdfcanvas", {
        selection: false
      });
   fcanvas.setBackgroundImage(bg,fcanvas.renderAll.bind(fcanvas));
      fcanvas.setWidth(300);
      fcanvas.setHeight(300);
      var rect = new fabric.Rect({
        left: 100,
        top: 100,
        width: 50,
        height: 50,
        fill: '#FF454F',
        opacity: 0.5,
        transparentCorners: true,
        borderColor: "gray",
        cornerColor: "gray",
        cornerSize: 5
      });
      fcanvas.add(rect);
      fcanvas.renderAll();
    });
  });
});
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<script src="https://seikichi.github.io/tmp/PDFJS.0.8.715/pdf.min.js"></script>
<canvas id="pdfcanvas" style="border:1px solid black"></canvas>

于 2016-11-18T07:20:43.783 に答える