如何将多个图像组合成一页并将其打印为 pdf？

Question

我有一个包含 4 个图表的网页。 我正在为他们每个人拍摄单独的屏幕截图。 然后尝试将它们放在另一个 canvas 上，垂直显示并将其打印为单页 pdf 文件。 但是，我收到一条错误消息：

未捕获的类型错误：CanvasRenderingContext2D.drawImage：参数 1 无法转换为以下任何一种：HTMLImageElement、SVGImageElement、HTMLCanvasElement、HTMLVideoElement、ImageBitmap。

这是脚本

 function HTMLtoPDF() { function verticalCanvases(cnv1, cnv2, cnv3, cnv4) { var newCanvas = document.createElement('canvas'), ctx = newCanvas.getContext('2d'), width = cnv1.width, height = cnv1.height + cnv2.height + cnv3.height + cnv4.height; newCanvas.width = width; newCanvas.height = height; [{ cnv: cnv1, y: 0 }, { cnv: cnv2, y: cnv1.height }, { cnv: cnv3, y: cnv1.height + cnv2.height }, { cnv: cnv4, y: cnv1.height + cnv2.height + cnv3.height }].forEach(function(n) { ctx.beginPath(); ctx.drawImage(n.cnv, 0, ny, width, n.cnv.height); }); var imgdata = newCanvas.toDataURL(); return imgdata; } var forms = $('[id^=caspioform]'); var canvas1 = html2canvas(forms[3]); var canvas2 = html2canvas(forms[5]); var canvas3 = html2canvas(forms[7]); var canvas4 = html2canvas(forms[9]); var dURL = verticalCanvases(canvas1, canvas2, canvas3, canvas4); var doc = new jsPDF("p", "mm", "a4"); var width = doc.internal.pageSize.getWidth(); var height = doc.internal.pageSize.getHeight(); doc.addImage(dURL, 'PNG', 0, 0, width, height); doc.save('sample.pdf'); }

Answer 1

既然你没有提到它，我会假设html2canvas来自https://github.com/niklasvh/html2canvas

在这种情况下，这里的问题是hmtl2canvas返回一个Promise ，这就是您传递给verticalCanvases而不是实际的 canvas 元素的内容。

要修复它，只需将 function 转换为异步的，这样您就可以使用async / await ：

// |
// |
// v
async function HTMLtoPDF() {

    function verticalCanvases(cnv1, cnv2, cnv3, cnv4) {
        var newCanvas = document.createElement('canvas'),
            ctx = newCanvas.getContext('2d'),
            width = cnv1.width,
            height = cnv1.height + cnv2.height + cnv3.height + cnv4.height;
    
        newCanvas.width = width;
        newCanvas.height = height;
    
        [{
            cnv: cnv1,
            y: 0
        },
        {
            cnv: cnv2,
            y: cnv1.height
        },
        {
            cnv: cnv3,
            y: cnv1.height + cnv2.height
        },
        {
            cnv: cnv4,
            y: cnv1.height + cnv2.height + cnv3.height

        }].forEach(function(n) {
            ctx.beginPath();
            ctx.drawImage(n.cnv, 0, n.y, width, n.cnv.height);
        });
    
         var imgdata = newCanvas.toDataURL();

        return imgdata;
    }

    var forms = $('[id^=caspioform]');

    var canvas1 = await html2canvas(forms[3]); // <--
    var canvas2 = await html2canvas(forms[5]); // <--
    var canvas3 = await html2canvas(forms[7]); // <--
    var canvas4 = await html2canvas(forms[9]); // <--

    var dURL = verticalCanvases(canvas1, canvas2, canvas3, canvas4);

    var doc = new jsPDF("p", "mm", "a4");

    var width = doc.internal.pageSize.getWidth();
    var height = doc.internal.pageSize.getHeight();

    doc.addImage(dURL, 'PNG', 0, 0, width, height);

    doc.save('sample.pdf');
}