个人中心
gpt4 book ai didi

javascript - 使用 PDF.JS 将 PDF 转换为缩略图

转载 作者：行者123 更新时间：2023-11-29 21:03:17 25 4
gpt4 key购买 nike

我正在尝试编写一些代码，将 PDF 的第一页转换为 PNG 缩略图。我在 stackoverflow 和网络上的其他地方找到了几个例子，这似乎是一件简单的事情，但我无法让它工作。

我有一个看起来像这样的 HTML 文件

<!DOCTYPE html>
<html>

<head>
    <title>JR PDF test</title>
</head>

<body>
    <script type="text/javascript" src="/build/pdf.js"></script>
    <script type="text/javascript" src="jr-pdf.js"></script>
    <script type="text/javascript" src="canvas2image.js"></script>
</body>

<div id="pdf-main-container">
    <a id="download-image" href="#">Download PNG</a>
</div>
</div>

</html>

<canvas id="the-canvas"></canvas>

jr-pdf.js 看起来像这样

// URL of PDF document
var url = "REGLEMENT_FOR_RALLY_2012.pdf";

// Asynchronous download PDF
PDFJS.getDocument(url)
  .then(function(pdf) {
    return pdf.getPage(1);
  })
  .then(function(page) {
    // Set scale (zoom) level
    var scale = 1.5;

    // Get viewport (dimensions)
    var viewport = page.getViewport(scale);

    // Get canvas#the-canvas
    var canvas = document.getElementById('the-canvas');

    // Fetch canvas' 2d context
    var context = canvas.getContext('2d');

    // Set dimensions to Canvas
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    // Prepare object needed by render method
    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };

    // Render PDF page
    page.render(renderContext);

    // JR experiments
    console.log('hej');

    url = canvas.toDataURL();

    downloadButton = document.getElementById('download-image');
    downloadButton.setAttribute('download', 'jr.png');
    downloadButton.setAttribute('href', url);
  });

PDF 文件的第一页正确地呈现在屏幕上并生成了一个 jr.png 文件。当我查看 PNG 文件时，标题似乎是正确的，但当我尝试使用图像查看器查看文件时，它是空的(实际上它显示为透明)。

所以我猜这些行是错误的:

url = canvas.toDataURL();

downloadButton = document.getElementById('download-image');
downloadButton.setAttribute('download', 'jr.png');
downloadButton.setAttribute('href', url);

关于如何制作正确的 PNG 文件有什么建议吗？

最佳答案

page.render 是异步函数——你需要等到它完成绘制

var renderTask = page.render(renderContext);
renderTask.promise.then(function () {
    // use canvas now
    var url = canvas.toDataURL();

    var downloadButton = document.getElementById('download-image');
    downloadButton.setAttribute('download', 'jr.png');
    downloadButton.setAttribute('href', url);      
});

关于javascript - 使用 PDF.JS 将 PDF 转换为缩略图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45446734/

25 4 0
文章推荐： javascript - 使用 innerHTML 构建动态表
文章推荐： android - 模拟器 Admob 广告
文章推荐： android - 在 Android 中获取 Facebook 共同好友
文章推荐： javascript - 重新导出模块不适用于对象传播
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com