我有一个4页的pdf,每个页面都有一个透明的背景 . 我使用pdf.js来显示它们,但我想在我的html页面上用透明背景显示它们但我无法弄清楚我是如何做到的,总是有一个白色背景:
我认为根据this issue是可能的,但是当我将行 page.render(renderContext);
更改为 page.render({renderContext, viewport, backgroundColor: 'rgba(0,0,0,0)' });
时(正如它在问题中所述)我有以下错误:
关于如何管理它的任何想法?
我使用pdf.js版本v1.9.426和Firefox 55.0.2(64位) .
EDIT : 使用以下代码我在控制台中没有错误,但我的pdf文件的背景仍为白色 . (但是,如果用例如photoshop打开pdf则没有背景)
链接到我使用的PDF文件:tempPDF.pdf
这是我的javascript文件,显示四个页面:
var pdfFile;
PDFJS.getDocument('/assets/pdf/tempPDF.pdf').then(function (pdf) {
pdfFile = pdf;
for(var i = 1; i <= 5; i++) {
var canvas = document.getElementById('canvas'+i);
var context = canvas.getContext('2d');
PDFJS.disableStream = true;
openPage(pdf, i, context, 50);
}
});
function openPage(pdfFile, pageNumber, context, ratio) {
var scale = 10;
pdfFile.getPage(pageNumber).then(function (page) {
viewport = page.getViewport(scale);
// reference canvas via context
var canvas = context.canvas;
canvas.width = viewport.width;
canvas.height = viewport.height;
canvas.style.width = ratio+"%";
canvas.style.height = ratio+"%";
var renderContext = {
canvasContext: context
, viewport: viewport
};
page.render({canvasContext: context, viewport: viewport, backgroundColor: 'rgba(0,0,0,0)' });
//page.render(renderContext);
});
}
我的html页面可能有用:
<!DOCTYPE html>
<html>
<body
style="background-color:powderblue;">
</body>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="PDF Viewer" />
<title>My page</title>
</head>
<body>
<form action="pdf_latex_test.php">
<input type="submit" value="execute" /> </form>
</body>
<body>
<canvas id="canvas1" width="300" height="300"></canvas>
<canvas id="canvas2" width="300" height="300"></canvas>
<canvas id="canvas3" width="300" height="300"></canvas>
<canvas id="canvas4" width="300" height="300"></canvas>
<script src="/assets/js/pdf.js"></script>
<script src="/assets/js/pdf.worker.js"></script>
<script src="/assets/js/pdf.latex.main.js"></script>
</body>
</html>
1 回答
change和API documentation显示属性名称必须为
background
: