javascript - 如何使用 javascript 检测在 PDF 中标记图像的位置

Question

你好

我正在尝试实现一个允许我签署 PDF 文档的小项目，我已经实现了一个 Html 5 pad 来绘制签名并将图像标记到 pdf 中。我正在使用来自 Github 的 signature_pad 库:

var canvas = document.querySelector("canvas");
var signaturePad = new SignaturePad(canvas);
signaturePad.toDataURL(); // save image as PNG
signaturePad.toDataURL("image/jpeg"); // save image as JPEG
signaturePad.fromDataURL("data:image/png;base64,iVBORw0K...");
signaturePad.clear();
signaturePad.isEmpty();
signaturePad.off();
signaturePad.on();

我的大问题是我如何知道用户必须在pdf中签名的位置，因为pdf不一样，用户可以上传自己的pdf。

任何人都可以帮助我解决这方面的问题吗？我非常感谢您的帮助。

Answer 1

我做了类似的事情:

• 将 PDF 上传到服务器。

• 使用 GhostScript 为每个页面生成图像。

• 使用 pdftk 创建 pdf 报告。

• 从报告中获取图像尺寸。请注意，某些 pdf 会旋转，例如，如果报告中的旋转为 270(270/90 = 奇数)，则必须交换宽度和高度。

• 使用 jquery 允许将签名位置拖放到 div 上，并将生成的图像页面作为内容。将图像设置为固定宽度，以便稍后可以使用该数字来计算位置。

• 计算签名位置相对于每个页面的绝对位置。重要的是获取每页的位置，而不是整个文档的位置。对于整个文档来说，高度不够准确，导致多个页面的位置不一致。

• 使用 wkhtmltopdf 生成仅包含签名的 pdf 叠加层。使用精确的页面尺寸(以毫米为单位)(如您从报告中检索到的)，而不是预设的页面尺寸。如果您的绝对测量值以像素(点)为单位，则必须转换为毫米，反之亦然(0.352777..每毫米像素)。

• 生成 pdf html 时，可以使用 page-break-after:always !important; 开始新页面，然后将签名绝对定位在之后的 div 中。

• 使用 pdftk 将叠加 pdf 与原始文件合并。