将 Kinetic JS 添加到 PDF 文件答案

【问题标题】：Adding Kinetic JS to PDF file将 Kinetic JS 添加到 PDF 文件
【发布时间】：2013-03-23 05:17:53
【问题描述】：

我正在尝试使用 pdf.js 将 KineticJS 形状添加到现有 pdf 文件中。我遇到的问题是 KineticJS 创建了一个新画布并且不会使用由 pdf.js 创建的画布。我尝试在 KineticJS 中引用 pdf.js 画布，但这不起作用。关于如何将两者结合起来的任何想法？主要目的是为pdf提供注释。

【问题讨论】：

好吧，我们的想法是将 Kinetic 画布保存为图像，然后将该图像放在 pdf.js 画布中。这可能会为您指明正确的方向：stackoverflow.com/questions/13164226/…
我不确定这是否有用。我需要能够稍后编辑形状。我还需要能够查看 pdf，以便形状的放置有意义。
能否贴出引用pdf.js画布的代码

标签： html kineticjs pdf.js

【解决方案1】：

如果你对这个过程不太了解，你可以试试 Bytescout，它会生成 .pdf 并且还包含一个钩子来将你的画布图像加载到你的 pdf 中。

一切都在客户端完成，因此您可以查看/编辑/查看/编辑自己喜欢的内容。

他们在这里：http://bytescout.com/products/developer/pdfgeneratorsdkjs/index.html（顺便说一句，这里没有推销——我没有以任何方式连接到 bytescout！）

这是他们网站上的一个示例，显示了嵌入式画布：

function CreatePDF() {

    // create BytescoutPDF object instance
    var pdf = new BytescoutPDF();

    // set document properties: Title, subject, keywords, author name and creator name
    pdf.propertiesSet("Sample document title", "Sample subject", "keyword1, keyword 2, keyword3", "Document Author Name", "Document Creator Name");

    // set page size
    pdf.pageSetSize(BytescoutPDF.A4);

    // set page orientation (BytescoutPDF.PORTRAIT = portrait, BytescoutPDF.LANDSCAPE = landscape)
    pdf.pageSetOrientation(BytescoutPDF.PORTRAIT);

    // add new page
    pdf.pageAdd();

    // create temporary canvas (you can also simply get existing canvas)
    var canvas = document.createElement('canvas');
    // set width and height
    canvas.width = 320;
    canvas.height = 240;

    // get context from canvas (to draw on)
    var context = canvas.getContext("2d");

    // set white background color
    context.fillStyle = "#FFFFFF";
    // and fill the background with white color
    context.fillRect(0, 0, 320, 240);

    // draw the yellow circle
    context.strokeStyle = "#000000";
    context.fillStyle = "#FFFF00";
    context.beginPath();
    context.arc(100, 100, 50, 0, Math.PI * 2, true);
    context.closePath();
    context.stroke();
    context.fill();

    // load image from canvas into BytescoutPDF
    pdf.imageLoadFromCanvas(canvas);

    // place this image at given X, Y coordinates on the page
    pdf.imagePlace(20, 40);


    // return BytescoutPDF object instance
    return pdf;
}

【讨论】：

谢谢。我认为 BytescoutPDF 像 JSPDF 一样工作，因为它从画布内容创建 pdf。我其实没有这个问题。问题是查看现有 PDF（使用 pdf.js）并使用 KineticJS 向该 PDF 添加注释。