無法利用現有<canvas>，而致使用PDF pdfjs

任務無法利用現有<canvas>，而致使用PDF pdfjs

矩形有一個畫布在你的頁面 <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/ - 你可以看到織物矩形隱藏渲染PDF 背後 - 點擊PDF畫布區域看織物對象

來源

2016-11-18 Kiran

我從你的小提琴看到的是，你不等待page.render方法的結果，這是異步的，然後，不幸的是，如果你等待page.render，fabric.canvas實例將清理你之前填充的畫布，我們做不到沒有這個。所以我嘗試了另一種方法：首先，我等待pdf.js page.render方法，然後調用先前填充的畫布的.toDataURL，以便我可以擁有舊內容的副本，然後設置先前填充的畫布作爲您的新fabric.canvas的背景，並完成繪製矩形。

var url = 'https://cdn.mozilla.net/pdfjs/helloworld.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-18 07:20:43 InferOn

由於一噸@Inferon，我實際使用相同了setBackgroundImage試過，但我錯過的是，我沒有意識到page.render（）的關鍵是一個承諾，所以我有我的在page.render（）之後立即執行代碼，因爲它是一個異步調用，所以它不適用於我。這是實現它的唯一方法，每次渲染新頁面時都將其設置爲背景圖像？很高興我設置了一個小提琴，但它很難解釋這個問題。 – Kiran

我認爲這是唯一的方法，但如果你能從你的pdf.js中獲得一個svg，那應該是另一個故事，最好的方面 – InferOn

當我問到github asturur中的問題時，我回答如下：以顯示您想要顯示的內容，覆蓋在pdfjs畫布上，保存繪製操作，每當您在布料畫布上做某些事情時重繪背景（pdfpage）。請爲這類問題打開stackoverlow問題，並在案件直接ping我，但不是一個問題，我們可以在這裏跟蹤。我們如何在畫布上疊加畫布？我沒有找到一個例子，如何做到這一點，當我有2個畫布，一個用於渲染pdfjs，另一個用於織物js，我無法繪製 – Kiran

無法利用現有<canvas>，而致使用PDF pdfjs

回答

相關問題