Javascript 如何将多个图像合并到一个页面中并以pdf格式打印？

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

未捕获类型错误：CanvasRenderingContext2D.drawImage:参数1 无法转换为以下任一项：HTMLImageElement、SVGImageElement、， HTMLCanvasElement、HTMLVideoElement、图像位图

这是剧本

函数HTMLtoPDF（）{
功能性眩晕（cnv1、cnv2、cnv3、cnv4）{
var newCanvas=document.createElement（'canvas'），
ctx=newCanvas.getContext（'2d'），
宽度=cnv1.width，
高度=cnv1.height+cnv2.height+cnv3.height+cnv4.height；
newCanvas.width=宽度；
newCanvas.height=高度；
[{
cnv:cnv1，
y:0
},
{
cnv:cnv2，
y:cnv1.0高度
},
{
cnv:cnv3，
y:cnv1.height+cnv2.height
},
{
cnv:cnv4，
y:cnv1.height+cnv2.height+cnv3.height
}].forEach（函数（n）{
ctx.beginPath（）；
ctx.drawImage（n.cnv，0，n.y，宽度，n.cnv.高度）；
});
var imgdata=newCanvas.toDataURL（）；
返回imgdata；
}
变量形式=$（'[id^=caspioform]'）；
var canvas1=html2canvas（表格[3]）；
var canvas2=html2canvas（表格[5]）；
var canvas3=html2canvas（表格[7]）；
var canvas4=html2canvas（表格[9]）；
var dURL=眩晕病（canvas1，canvas2，canvas3，canvas4）；
var doc=新的jsPDF（“p”、“mm”、“a4”）；
var width=doc.internal.pageSize.getWidth（）；
var height=doc.internal.pageSize.getHeight（）；
文件添加图像（dURL，'PNG'，0，0，宽度，高度）；
doc.save（'sample.pdf'）；
}

既然您没有提到它，我假设

html2canvas

来自

在这种情况下，这里的问题是

hmtl2canvas

返回一个

Promise

，这是传递给

verticalcases

的内容，而不是实际的画布元素

要修复此问题，只需将函数转换为异步函数，以便可以使用

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

//|
// |
//五
异步函数HTMLtoPDF（）{
功能性眩晕（cnv1、cnv2、cnv3、cnv4）{
var newCanvas=document.createElement（'canvas'），
ctx=newCanvas.getContext（'2d'），
宽度=cnv1.width，
高度=cnv1.height+cnv2.height+cnv3.height+cnv4.height；
newCanvas.width=宽度；
newCanvas.height=高度；
[{
cnv:cnv1，
y:0
},
{
cnv:cnv2，
y:cnv1.0高度
},
{
cnv:cnv3，
y:cnv1.height+cnv2.height
},
{
cnv:cnv4，
y:cnv1.height+cnv2.height+cnv3.height
}].forEach（函数（n）{
ctx.beginPath（）；
ctx.drawImage（n.cnv，0，n.y，宽度，n.cnv.高度）；
});
var imgdata=newCanvas.toDataURL（）；
返回imgdata；
}
变量形式=$（'[id^=caspioform]'）；
var canvas1=wait html2canvas（forms[3]）；//您好，看起来画布数据无法由画布元素呈现，这意味着您可能正在获取html画布以检索内部cavas上下文，请尝试呈现画布上下文而不是画布html元素