如何为 jsPDF 调整 canvas 的大小

Question

我正在 chrome 中使用 jsPDF 进行响应。我正在制作 canvas 然后尝试将我网站的 png 图像放在 canvas 上并将其下载为 pdf。该过程有效，但图像出现拉伸。我尝试手动更改 canvas 的大小并更改放置在 canvas 上的图像的尺寸，但这似乎对最终的 pdf 没有影响。

有没有人处理过这个烦人的问题谁能提供一些指导？谢谢:)

创建 pdf 的代码：

downloadPdf = (quality = 2) => {
        const filename  = 'ThisIsYourPDFFilename.pdf';

        html2canvas(document.querySelector('#nodeToRenderAsPDF'), 
                                {scale: quality}
                         ).then(canvas => {
            let pdf = new jsPDF('p', 'px', 'a4'); 
            pdf.height="600"
            pdf.width= "800" //this is the canvas resolution
            pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, 450, 500); //this is the image resolution
            pdf.save(filename);
        });
    }

我还将包括我获得的最终 PDF 以供参考

Answer 1

您的图片尺寸为 450 x 500，但您的 pdf 尺寸为 600 x 800。 450 / 500 = .9 = 90% 和 600 / 800 = .75 = 75%，因此您的图片在从一种宽高比转换为另一种宽高比时会显得拉伸。如果我是你，我会选择一套尺码并坚持使用。 600 x 800 似乎是合理的，所以尝试将最后一行更改为：

pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, 600, 800); //this is the image resolution

并声明您的 canvas 大小相同（即，在声明 canvas html 元素的任何地方，将其设置为 <canvas id="myCanvas" width="600" height="800"></canvas>）。

如何为 jsPDF 调整 canvas 的大小

How to size a canvas for jsPDF

javascript

png

jspdf

reactjs