【问题标题】：pulling images from different canvas and exporting to single pdf从不同的画布中提取图像并导出为单个 pdf
【发布时间】：2015-08-23 18:01:11
【问题描述】：

我有一种情况，我在网页中生成多个图形并在画布中显示它们，我的要求是单击下载按钮时，我应该能够将所有画布图像导出为 pdf。

我已经使用 html2canvas 和 Jspdf 成功地为单个画布元素完成了此操作，但无法弄清楚如何对所有元素执行相同操作。

我按照这个 JSFiddle 代码从 Html2canvas 和 jspdf 生成 pdf。

jsfiddle

    $(document).ready(function() {
    var d_canvas = document.getElementById('canvas');
    var context = d_canvas.getContext('2d');
    context.moveTo(20, 20);
    context.lineTo(100, 20);
    context.fillStyle = "#999";
    context.beginPath();
    context.arc(100, 100, 75, 0, 2 * Math.PI);
    context.fill();
    context.fillStyle = "orange";     
    context.fillRect(20, 20, 50, 50);
    context.font = "24px Helvetica";
    context.fillStyle = "#000";
    context.fillText("Canvas", 50, 130);
    $('#ballon').draggable();
    $('#download').click(function() {       
        html2canvas($("#canvas"), {
            onrendered: function(canvas) {         
                var imgData = canvas.toDataURL(
                    'image/png');              
                var doc = new jsPDF('p', 'mm');
                doc.addImage(imgData, 'PNG', 10, 10);
                doc.save('sample-file.pdf');
            }
        });
    });
});

请帮忙，在此先感谢。

【问题讨论】：

循环？请发布一些示例代码。
这怎么没有按预期工作？
我想要一个例子，我可以从不同的画布中提取图像并将它们导出为 pdf

标签： html5-canvas jspdf html2canvas

【解决方案1】：

很简单，我只是把参数改成这一行

 html2canvas($("#canvas"), {

我没有传递单独的画布，然后尝试将它们导出为单个 pdf，而是在 Div 上保留了不同的画布并将 Div id 传递到上述行，并且两个画布都导出到单个 pdf 文件

【讨论】：

【解决方案2】：

应该没有必要为此使用 html2canvas。它只会为您提供另一个画布元素。 jsPdf可以直接使用原画布元素和toDataURL()。

示例（部分伪）

这将收集页面中的所有画布并将它们放入 PDF 中。伪部分是缺少宽度、增量、因子等变量。但您应该了解它的要点。

注意：图像的大小必须以您用于文档的相同单位给出，因此您需要使用基于预先计算的因子将像素位置和大小转换为毫米表示关于文档 DPI（此处未显示，但 this 可能会有所帮助）。

var x = someX,
    y = someY,
    dx = somDeltaForX,
    dy = somDeltaForY,
    i,
    canvases = document.querySelectorAll("canvas"),
    pdf = new jsPDF('p', 'mm'),
    f = convertionFactorFromPixelstoMM;


for(i = 0; i < canvases.length; i++) {
  var url = canvases[i].toDataURL("image/jpeg", 0.75);
  doc.addImage(url, "JPEG", x * f, y * f, canvases[i].width * f, canvases[i].height * f);
  x += dx;   // tip: dx could also be based on previous canvas width in non-uniform sizes
  if (x > widthOfPage) {
    x = 0;
    y += dy;
  }
}

【讨论】：