无法在使用 pdfjs 呈现 PDF 的现有 <canvas> 上绘制矩形
not able to draw rect on existing <canvas> which rendered PDF using pdfjs
任务
在您的页面中有 canvas
<canvas id="pdfCanvas">
为现有 canvas 创建结构 canvas
new fabric.Canvas("pdfCanvas");
有 mouse.down、mouse.up、mouse.move 方法来启用绘制矩形
使用 PDF.js 在 canvas "pdfCanvas" 中渲染 pdf
浏览器现在显示呈现的 PDF
现在在 pdf 上绘制矩形,它隐藏渲染的 canvas 但它绘制对象
问题
这里是 fiddle 查看问题:
- 运行 以上 https://jsfiddle.net/hiitskiran/wgz8qore/2/
- 你可以看到织物矩形隐藏在渲染的 pdf 后面
- 单击 pdf canvas 区域以查看织物对象
我从你的 fiddle 看到的是你不等待 page.render
方法的结果,它是异步的,那么不幸的是,如果你等待 page.render
, fabric.canvas 实例将清除您之前填充的 canvas,我们对此无能为力。
所以我尝试了另一种方法:首先,我等待 pdf.js page.render
方法,然后我调用你之前填写的 canvas 的 .toDataURL 这样我就可以获得旧的副本内容,然后我将您之前填充的 canvas 设置为新 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>
任务
在您的页面中有 canvas
<canvas id="pdfCanvas">
为现有 canvas 创建结构 canvas
new fabric.Canvas("pdfCanvas");
有 mouse.down、mouse.up、mouse.move 方法来启用绘制矩形
使用 PDF.js 在 canvas "pdfCanvas" 中渲染 pdf
浏览器现在显示呈现的 PDF
现在在 pdf 上绘制矩形,它隐藏渲染的 canvas 但它绘制对象
问题
这里是 fiddle 查看问题: - 运行 以上 https://jsfiddle.net/hiitskiran/wgz8qore/2/ - 你可以看到织物矩形隐藏在渲染的 pdf 后面 - 单击 pdf canvas 区域以查看织物对象
我从你的 fiddle 看到的是你不等待 page.render
方法的结果,它是异步的,那么不幸的是,如果你等待 page.render
, fabric.canvas 实例将清除您之前填充的 canvas,我们对此无能为力。
所以我尝试了另一种方法:首先,我等待 pdf.js page.render
方法,然后我调用你之前填写的 canvas 的 .toDataURL 这样我就可以获得旧的副本内容,然后我将您之前填充的 canvas 设置为新 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>