使用pdf.js展示透明背景的pdf文件

Question

使用pdf.js展示透明背景的pdf文件

4

我有一个有四页的pdf文件，每一页都有透明背景。我使用pdf.js来显示它们，但我想在我的html页面上以透明背景显示它们，但我无法弄清楚如何做到这一点，总是会有白色背景：

根据这个问题，我认为这是可能的，但当我将行page.render(renderContext);更改为page.render({renderContext, viewport, backgroundColor: 'rgba(0,0,0,0)' });(如问题所述)，我遇到了以下错误:

你有什么想法可以帮我管理这个问题吗？

我使用的是pdf.js版本v1.9.426和Firefox 55.0.2（64位）。

编辑： 使用以下代码，控制台没有任何错误，但我的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>

- Yohann L.

在v1.9.426版本中可用，请参见https://github.com/mozilla/pdf.js/releases/tag/v1.9.426 - async5

@async5 我尝试使用v1.9.426，但是我得到了完全相同的结果/错误（我认为我已经在v1.9.426上了）。 - Yohann L.

请提供一个完整的示例--很难确定您是否在使用ES6字面对象语法时出现了错误（请参见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer中的“简写属性”示例）。对于您来说，它应该是`page.render({canvasContext: context, viewport: viewport, backgroundColor: 'rgba(0,0,0,0)' });`。 - async5

1

@async5 我认为错误是由于语法错误造成的，现在我没有错误，但仍然有白色背景。我还尝试过'rgba(45,56,134,100)'(随机颜色)，但它也是白色的。我已经编辑了我的帖子，并附上了我使用的代码。 - Yohann L.

@async5 另外，在Acrobat Reader中，我可以看到透明度（使用背景中的棋盘选项）。 - Yohann L.

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- async5 · Accepted Answer

更改和API文档显示属性名称必须为background：

var url = '//cdn.mozilla.net/pdfjs/helloworld.pdf';

PDFJS.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';

var loadingTask = PDFJS.getDocument(url);
loadingTask.promise.then(function(pdf) {
  var pageNumber = 1;
  pdf.getPage(pageNumber).then(function(page) {
    console.log('Page loaded');
    
    var scale = 1.5;
    var viewport = page.getViewport(scale);

    // Prepare canvas using PDF page dimensions
    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    // Render PDF page into canvas context
    var renderContext = {
      canvasContext: context,
      // Use transparent background!
      background: 'rgba(0,0,0,0)',
      viewport: viewport
    };
    var renderTask = page.render(renderContext);
    renderTask.then(function () {
      console.log('Page rendered');
    });
  });
}, function (reason) {
  // PDF loading error
  console.error(reason);
});

#the-canvas {
  border:1px solid black;
  background-image: url(http://image.blingee.com/images19/content/output/000/000/000/7c8/805674825_1628628.gif?6);
}

<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
<canvas id="the-canvas"></canvas>