Javascript JSPDF不'；t使用在线src添加图像

在web应用程序中，我使用JSPDF将html转换为pdf。除了图像，所有的作品都很好。过了一会儿，我注意到它添加了指向本地资源的图像；相反，它不会添加指向在线资源的图像，并在图像的位置留下一个空白，就好像他期待它，但无法加载它一样

例如：

已正确添加。

未正确添加；有一个空的空间，而不是图像

---

我怎样才能解决它？可能将图像暂时存储在本地？我尝试使用addImage（），但它很难使用，这不仅是因为我更改了pdf的比例因子，而且主要是因为pdf的内容是动态的，我不知道图像的大小或确切位置。

您需要确保在

addImage（）

之前加载图像。下面的代码是我用来在线将多个图像转换为PDF文件的代码。它将根据图像/页面的方向旋转图像，并设置适当的边距。请注意，此代码仅用于图像，而不是嵌入图像的Html页面，但是

img.onload

的概念保持不变

至于图像旋转，如果在旋转后看到一个空白页面，可能只是图像超出了边界。请参阅此以了解详细信息

function exportPdf(urls) {
    let pdf = new jsPDF('l', 'mm', 'a4');
    const pageWidth = pdf.internal.pageSize.getWidth();
    const pageHeight = pdf.internal.pageSize.getHeight();
    const pageRatio = pageWidth / pageHeight;

    for (let i = 0; i < urls.length; i++) {
        let img = new Image();
        img.src = urls[i];
        img.onload = function () {
            const imgWidth = this.width;
            const imgHeight = this.height;
            const imgRatio = imgWidth / imgHeight;
            if (i > 0) { pdf.addPage(); }
            pdf.setPage(i + 1);
            if (imgRatio >= 1) {
                const wc = imgWidth / pageWidth;
                if (imgRatio >= pageRatio) {
                    pdf.addImage(img, 'JPEG', 0, (pageHeight - imgHeight / wc) / 2, pageWidth, imgHeight / wc, null, 'NONE');
                }
                else {
                    const pi = pageRatio / imgRatio;
                    pdf.addImage(img, 'JPEG', (pageWidth - pageWidth / pi) / 2, 0, pageWidth / pi, (imgHeight / pi) / wc, null, 'NONE');
                }
            }
            else {
                const wc = imgWidth / pageHeight;
                if (1 / imgRatio > pageRatio) {
                    const ip = (1 / imgRatio) / pageRatio;
                    const margin = (pageHeight - ((imgHeight / ip) / wc)) / 4;
                    pdf.addImage(img, 'JPEG', (pageWidth - (imgHeight / ip) / wc) / 2, -(((imgHeight / ip) / wc) + margin), pageHeight / ip, (imgHeight / ip) / wc, null, 'NONE', -90);
                }
                else {

                    pdf.addImage(img, 'JPEG', (pageWidth - imgHeight / wc) / 2, -(imgHeight / wc), pageHeight, imgHeight / wc, null, 'NONE', -90);
                }
            }
            if (i == urls.length - 1) {
                pdf.save('Photo.pdf');
            }
        }
    }
}

函数导出PDF（URL）{
设pdf=新的jsPDF（'l'，'mm'，'a4'）；
const pageWidth=pdf.internal.pageSize.getWidth（）；
const pageHeight=pdf.internal.pageSize.getHeight（）；
常量页面比率=页面宽度/页面高度；
for（设i=0；i0）{pdf.addPage（）；}
pdf.setPage（i+1）；
如果（imgRatio>=1）{
常量wc=imgWidth/pageWidth；
如果（imgRatio>=页面比率）{
添加图像（img，'JPEG'，0，（pageHeight-imghight/wc）/2，pageWidth，imghight/wc，null，'NONE'）；
}
否则{
const pi=页面比率/imgRatio；
添加图像（img，'JPEG'，（pageWidth-pageWidth/pi）/2,0，pageWidth/pi，（imgHeight/pi）/wc，null，'NONE'）；
}
}
否则{
常量wc=imgWidth/页面高度；
如果（1/imgRatio>pageRatio）{
常数ip=（1/不等）/页比率；
常量边距=（页面高度-（（imghight/ip）/wc））/4；
pdf.addImage（img，'JPEG'，（pageWidth-（imghight/ip）/wc）/2，-（（（imghight/ip）/wc）+页边距），pageHeight/ip，（imghight/ip）/wc，null，'NONE'，-90）；
}
否则{
pdf.addImage（img，'JPEG'，（pageWidth-imgHeight/wc）/2，-（imgHeight/wc），pageHeight，imgHeight/wc，null，'NONE'，-90）；
}
}
if（i==url.length-1）{
pdf.save（'Photo.pdf'）；
}
}
}
}

如果这有点难以理解，您还可以使用

.addPage（[imgWidth，imgHeight]）

，这更简单。这种方法的缺点是第一页由

newjspdf（）

固定。有关详细信息，请参阅。你可以用

这可能会有帮助