Html5 canvas 从不同画布中提取图像并导出为单个pdf

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

我已经使用html2canvas和Jspdf成功地为单个画布元素完成了这项工作，但我无法确定如何对所有画布元素执行相同的操作

我遵循这个JSFIDLE代码从Html2canvas和jspdf生成pdf

---

请提供帮助，提前感谢。

不需要为此使用html2canvas。它只会以一定的成本为您提供另一个画布元素。您可以将原始canvas元素和

toDataURL（）

直接与jsPdf一起使用

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

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

var x=someX，
y=someY，
dx=somDeltaForX，
dy=松德尔塔弗利，
我
canvases=document.queryselectoral（“canvas”），
pdf=新的jsPDF（'p'，'mm'），
f=转换因子FROMPIXELSTOMM；
对于（i=0；i页面宽度）{
x=0；
y+=dy；
}
}

非常简单，我只是将参数改为这一行

 html2canvas($("#canvas"), {

---

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

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

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;
  }
}

 html2canvas($("#canvas"), {