使用“ addImage”或“ fillRect”,结果放置不正确和/或大小不正确

时间:2019-05-06 09:35:30

标签: javascript jspdf

我正在尝试使用jsPDF建立一个简单的“将图像转换为PDF”功能,但是我发现自己因一种奇怪的行为而停下来:图片的位置和大小不是参数中给出的。

function exportToPdf(src_){
    var pdfSize = [100, 100];

    var pdfDoc = new jsPDF({
        "unit" : "px",
        "format" : pdfSize
    });

    var tempImg = new Image();

    tempImg.onload = function(event_){
        pdfDoc.addImage(
            tempImg,
            "PNG",
            0,
            0,
            pdfSize[0],
            pdfSize[1]
        );

        pdfDoc.save("test.pdf");
    }

    tempImg.src = src_;
}

很简单:我以像素为单位定义PDF的大小,加载图像,将其添加到PDF的[0,0]位置,并使用PDF和DL的大小。

What I expectedthe result I have on CodePen

看到这一点,我试图调整位置,而不是[0,0],我给出了

pdfDoc.addImage(
    tempImg,
    "PNG",
    pdfSize[0]/2,
    pdfSize[1]/2,
    pdfSize[0],
    pdfSize[1]
);

我希望图像从PDF的中间开始并在右侧和底部溢出,只有左上角的四分之一可见。

The result


我在基本的HTML页面上遇到了这个问题,但在CodePen上,完全相同的代码在the test page of parall.ax上可以正常工作。

我觉得这是一个扩展问题,但我不明白为什么。有人有主意吗?

1 个答案:

答案 0 :(得分:0)

好吧,经过更多测试,我认为我找到了自己问题的答案:

位置和尺寸必须在“ pt”中给出。

英语不是我的母语,所以我可能写错了,但是documentation似乎不是最新的语言。

  • addImage指示x,y,宽度和高度必须为“以PDF文档开始时声明的单位”,但是如果单位不是“ pt”,则存在明显的缩放问题
  • fillRect并不表示其x / y单位,但其宽度/高度以像素为单位。同样,使用像素会导致缩放问题,而使用“ pt”则不会。