缩放使用drawImage绘制的画布

时间:2019-03-28 15:49:35

标签: javascript canvas jspdf

我正在尝试在由jsPDF创建的pdf中显示先前创建的画布。现有的画布通常但并非总是覆盖pdf中超过一页的高度,因此是for循环的。宽度也溢出了pdf中的可用宽度。

但是,使用下面的代码,它仍然可以看到水平和垂直拉伸。

现有画布的输出形式为:

  

<画布width =“ 2914.015748031533” height =“ 2644.5” style =“ width:971.339px;高度:881.5px;”>

我一直在反复查看我的代码和drawImage API,但无法找出错误。希望您能提供帮助。

generate = () => {
    const availWidthMm = pageWidth - 30
    const availHeighMm = 135
    const w = origin.width
    const h = origin.height

    const wMm = px2mm(w)
    const hMm = px2mm(h)

    pdf.newPage()
    pdf.title('Test')

    let generatedPartial = null

    // Split generated canvas over multiple pages
    for (let partialPageNbr = 0; partialPageNbr < Math.ceil(hMm / availHeighMm); partialPageNbr++) {
        if (partialPageNbr > 0) {
          pdf.newPage()
        }

        generatedPartial = document.createElement('canvas')
        generatedPartial.width = mm2px(availWidthMm)
        generatedPartial.height = mm2px(availHeightMm)
        document.body.appendChild(generatedPartial )

        const generatedPartialCtx = generatedPartial.getContext('2d')

        generatedPartialCtx.drawImage(
          origin,
          0,
          partialPageNbr * generatedPartial.height,
          generatedPartial.width,
          generatedPartial.height,
          0,
          0,
          generatedPartial.width,
          generatedPartial.height
        )

        // Add generated partial to the page
        pdf.addImage(generatedPartial.toDataURL('image/png', 1), 'PNG', 15, 45, 267, 130, `generatedPartial${partialPageNbr}`, 'fast')
     }
 }

0 个答案:

没有答案