jsPDF（HTML2Canvas）使用JPG（但不是PNG）抛出错误“加载图像时出错”答案

【问题标题】：jsPDF (HTML2Canvas) throwing error "Error loading image" with JPG (but not with PNG)jsPDF（HTML2Canvas）使用JPG（但不是PNG）抛出错误“加载图像时出错”
【发布时间】：2022-07-22 17:42:11
【问题描述】：

我在将使用旧版本 jsPDF (1.x) 的网站升级到最新版本 (2.5.1) 时遇到问题

我们使用 .html() 将 HTML 呈现为 PDF

我们遇到的一个问题是，每当遇到 jpeg 文件时，它都会失败并出现错误“加载图像错误”或“加载背景图像错误”

如果我将正在加载的图像更改为 PNG，它可以正常加载。

这是我能做到的最简单形式的问题

<html>

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.js" integrity="sha512-sn/GHTj+FCxK5wam7k9w4gPPm6zss4Zwl/X9wgrvGMFbnedR8lTUSLdsolDRBRzsX6N+YgG6OWyvn9qaFVXH9w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>

<body>
    <img src="image.jpg" id="testImage">  
    <a href="javascript:download()">Download</a>
</body>
<script>
        function download()
        {
            const { jsPDF } = window.jspdf;
            pdf = new jsPDF("p", "mm", [ 980,  1387]);
            pdf.html(
                document.getElementById('testImage'),             
                {
                    html2canvas: {
                        // insert html2canvas options here, e.g.                            
                        logging: true
                    },
                    callback: function(){ pdf.save("a4.pdf");}
                }
            )
        }
</script>

</html>```

【问题讨论】：

只是跟进，如果我直接使用 html2canvas 进行测试，一切都很好 - PNG 或 JPG html2canvas(document.querySelector("#testImage")).then(canvas => { document .body.appendChild(canvas) });

标签： jspdf html2canvas

【解决方案1】：

我在我的异步函数中使用了这个结构。试试看。

let scale_f = 0.7; // i scale my screenshots

let block = document.querySelector(".block");
    await html2canvas(block ,{
        scale: 1,
        windowWidth: 1110, // make screenshot like in setted window width 
        windowHeight: 2000, // same here but height
    }).then(canvas => {
        doc.addImage(canvas.toDataURL('image/png'), 'PNG', -30, 18, canvas.width*scale_f, canvas.height*scale_f);
    });

【讨论】：