html5-canvas - 从不同的 Canvas 中提取图像并导出为单个 pdf

Question

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

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

我按照这个 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');
            }
        });
    });
});

请帮助，在此先感谢。

Answer 1

这很简单，我只是将参数更改为这一行

 html2canvas($("#canvas"), {

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