canvas2pdf 将画布对象分配给上下文答案

【问题标题】：canvas2pdf assign canvas object to contextcanvas2pdf 将画布对象分配给上下文
【发布时间】：2018-10-17 13:54:04
【问题描述】：

我需要捕获网页的图像并将其保存为图像/PDF。我正在尝试实现 canvas2pdf canvas2pdf。我使用 html2canvas 在我的 javascript 中获取画布，然后尝试生成 PDF。有谁知道如何将画布分配/添加到 canvas2pdf 中的上下文。是否有任何其他我可以使用的脚本库（尝试过 jsPDF jsPDF 但它会引发错误 - Blob 不是构造函数）。我的代码如下：

        html2canvas(document.getElementById(obj), {     
        logging:true,
        proxy:'app/qBlob/proxy.ashx',
        useCORS: true,
        onrendered: function(canvas) {

             var ctx = new canvas2pdf.PDFContext(blobStream());

             //draw your canvas like you would normally
             // how to assign canvas to ctx??

             //convert your PDF to a Blob and save to file
             ctx.stream.on('finish', function () {
             var blob = ctx.stream.toBlob('application/pdf');
                saveAs(blob, 'example.pdf', true);
             });
             ctx.end();

            // jsPDF code
            // var imgData = canvas.toDataURL('image/png');
            // console.log(imgData);
            // var pdf = new jsPDF();
            // var marginLeft=20;
            // var marginRight=20;
            // pdf.addHTML(document.body);
            // pdf.save('example.pdf');
      }
    });

【问题讨论】：

标签： canvas jspdf html2canvas

【解决方案1】：

Blob is not a constructor 被抛出这一行：

var ctx = new canvas2pdf.PDFContext(blobStream());

改成这个以避免错误：

var stream = blobStream();
var ctx = new canvas2pdf.PdfContext(stream);

代码是canvas2pdf演示页面源代码的摘录：

查看源代码：https://joshua-gould.github.io/canvas2pdf/demo.html

【讨论】：