将签名图像合并到 div 中加载的 pdf答案

【问题标题】：Merge signature image onto a pdf loaded in a div将签名图像合并到 div 中加载的 pdf
【发布时间】：2014-09-30 02:58:37
【问题描述】：

对于一个项目，我需要将一个 pdf 文件加载到一个 div 中。单击按钮时，将打开画布，用户将在其中绘制签名，然后单击画布中的添加按钮，用户应该能够将画布签名作为图像放置到 pdf 上。最后点击最后一个按钮，图像应该被合并到 pdf 中。

我通过以下方式完成了上述任务：

使用 GhostScript 将 pdf 转换为一系列图像。
已将转换后的图像加载到 div 中。
单击按钮后，画布将打开，用户将登录它，单击画布中的添加按钮后，用户将能够将图像放置在 div 中加载的页面的图像上。
我使用 e.clientX 和 e.clientY 获得了作为页码和签名图像放置坐标的页面 ID。
然后我将所有这 3 个值传递给一个 php 脚本，该脚本使用 fpdf 和 fpdi 将图像合并到 pdf 中。
我无法正确放置图像，因为 e.clientX 和 e.clientY 使用像素作为单位，而 fpdf 使用毫米作为单位。我正在努力解决这个问题。

还有其他更简单的方法吗？即直接将pdf加载到div上并合并签名，而不是我上面解释的。

【问题讨论】：

标签： php html pdf-generation ghostscript fpdf

【解决方案1】：

您可以在您的项目中尝试使用 Firefox 的 PDF.js，您可以使用它。示例代码是：

PDFJS.getDocument('helloworld.pdf').then(function(pdf) {
  // Using promise to fetch the page
  pdf.getPage(1).then(function(page) {
    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,
      viewport: viewport
    };
    page.render(renderContext);
  });
});

【讨论】：

【解决方案2】：

有像 Mozillas pdf.js 这样的 JavaScript 库，可以直接在浏览器中将 PDF 文件呈现到画布中。这可能是规避图像渲染过程的一种可能性。但据我所知，这些库在 CMYK-PDF 方面存在问题。因此，安全的方法是进行图像渲染。

至于将签名嵌入到 pdf 中，除了您描述的那种方式，我看不到任何其他方式。上述库都只是显示 PDF 文件，因此它们不能写入 PDF。

希望有帮助

【讨论】：

【解决方案3】：

您可以查看 Applidok PDF 服务，该服务允许有签名区域，以便表单用户有机会上传签名图像，或将其绘制在画布上，以便合并到他的自定义 PDF 文档中最后生成。

网上有一个例子http://pipnee.com/P398D433C。

【讨论】：