使用 JavaScript 从 PDF 文件中提取图像

Question

我想编写 JavaScript 代码以从 PDF 文件中提取所有图像文件，也许将它们获取为 JPG 或其他一些图像格式。 已经有一些 JavaScript 代码用于读取 PDF 文件，例如在 PDF 查看器pdf-js中。

window.addEventListener('change', function webViewerChange(evt) {
  var files = evt.target.files;
  if (!files || files.length === 0)
    return;

  // Read the local file into a Uint8Array.
  var fileReader = new FileReader();
  fileReader.onload = function webViewerChangeFileReaderOnload(evt) {
    var buffer = evt.target.result;
    var uint8Array = new Uint8Array(buffer);
    PDFView.open(uint8Array, 0);
  };

  var file = files[0];
  fileReader.readAsArrayBuffer(file);
  PDFView.setTitleUsingUrl(file.name);
  ........

我可以使用此代码来帮助读取和提取图像文件吗？

Answer 1

例如，如果您打开包含pdf.js的页面

PDFJS.getDocument({url: <pdf file>}).then(function (doc) {
    doc.getPage(1).then(function (page) {
        window.page = page;
    })
})

然后，您可以使用getOperatorList搜索paintJpegXObject对象并获取资源。

window.objs = []
page.getOperatorList().then(function (ops) {
    for (var i=0; i < ops.fnArray.length; i++) {
        if (ops.fnArray[i] == PDFJS.OPS.paintJpegXObject) {
            window.objs.push(ops.argsArray[i][0])
        }
    }
})

现在， args将拥有您需要获取的该页面的资源列表。

console.log(window.args.map(function (a) { page.objs.get(a) }))

应该使用data-uri src= attributes向控制台打印一堆<img />对象。 这些可以直接插入到页面中，或者您可以执行更多脚本来获取原始数据。

它仅适用于嵌入式JPEG对象，但它是一个开始！

Answer 2

这是从 pdf 获取图像并将 alpha 通道添加到 Uint8ClampedArray 以便能够显示它的工作示例的链接<\/a>。 它在画布中显示图像。

codepen 中的示例： https<\/a> :\/\/codepen.io\/allandiego\/pen\/RwVGbyj

从画布获取数据 url 以便能够在 img 标签中显示它：

const canvas = document.createElement('canvas');
canvas.width = imageWidth;
canvas.height = imageHeight;
const ctx = canvas.getContext('2d');
ctx!.putImageData(imageData, 0, 0);
const dataURL = canvas.toDataURL();

Answer 3

Hello guys i've created a package for extract images from PDF , if you need get images from PDF you should use this package, it will be return images like base64 format.

https://www.npmjs.com/package/pdf-pages-to-base64-images