JSPDF不会使用在线src添加图像 [英] JSPDF doesn't add images with online src

问题描述

在Web应用程序中，我使用JSPDF将html转换为pdf。除图像外，一切正常。过了一会儿，我注意到它添加了指向本地资源的图像;相反，它不会添加指向在线资源的图像，并在图像的位置留下一个空白空间，就像他预期的那样但却无法加载它。

例如：< img src =img / house.jpg/> 已正确添加。
< img src =https://myurl.com/house.jpg/> 未正确添加;有空的空间而不是图像。

我该如何解决？也许暂时将图像存储在本地？我尝试使用addImage（），但它很难使用，不仅因为我改变了pdf的比例因子，而且主要是因为 pdf的内容是动态的，我不知道它的大小图像将具有或它们的确切位置。

解决方案

您需要确保在<

之前加载图像code> 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'）; 
} 
} 
} 
} 
  

如果这有点难以理解，你也可以使用 .addPage（[imgWidth，imgHeight]），这更简单。这种方法的缺点是第一页由 new jsPDF（）修复。有关详细信息，请参阅此答案。您可以使用 window.open（pdf.output（'bloburl'））来调试。

In a web application I'm using JSPDF to convert the html to pdf. All works fine, except for the images. After a while, I noticed that it adds images that point to a local resource; instead, it does not add images that point to an online resource, and leaves in the place of the image an empty space, as if he expected it but could not load it.

For example: <img src="img/house.jpg"/> is correctly added. <img src="https://myurl.com/house.jpg"/> is not correctly added; there is an empty space instead of the image.

How can I solve it? Maybe store the image temporarily in local? I tried using addImage() but it is very hard to use, not only because I change the scale factor of pdf, but primarily because the content of the pdf is dynamic, and I do not know what size the images will have or their exact position.

解决方案

You need to make sure the image(s) is/are loaded before addIMage(). The following code is what I used to convert multiple images online to a PDF file. It will rotate the image(s) based on the orientation of the images/page and set proper margin. Note that this code is for image only, not html page with embedded image(s), but the concept of img.onload remains the same.

As for image rotation, if you see a blank page after rotation, it could simply be that the image is out of bounds. See this answer for details.

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

If this is a bit hard to follow, you can also use .addPage([imgWidth, imgHeight]), which is more straightforward. The downside of this method is that the first page is fixed by new jsPDF(). See this answer for details. You can use window.open(pdf.output('bloburl')) to debug.

这篇关于JSPDF不会使用在线src添加图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！