使用toDataURL()将画布转换为图像,然后添加到pdf

时间:2019-04-19 08:41:20

标签: javascript jquery html jspdf html2canvas

我实现了

<script type="application/javascript" src="js/html2canvas.js"></script>
<script type="application/javascript" src="js/jspdf.debug.js"></script>

两个都是最新版本。 我有:

$(document).ready(function () {
        $('#down_but').click(function() {
            html2canvas(document.getElementById("node")).then(canvas => {
                const img = canvas.toDataURL("image/jpeg",1);
                const pdf = new jsPDF();
                pdf.addImage(img,"jpeg",5,5,205,292);
                pdf.save("file.pdf");

            });
        });
    });

当我只在pdf中放入一些文本而没有addImage时,pdf会打开并下载。但是,当我使用canvas toDataurl时,什么也没发生。我真的不知道为什么我尝试从另一个问题中复制并粘贴代码,但是它们都不适合我。 当我单击id =“ down_but”的下载按钮时,它只是在开发控制台中给出了错误。

See console error image

我尝试了一切,但无济于事。如果有人知道问题出在哪里,请帮助我。 我也为此创建了JSFiddle

1 个答案:

答案 0 :(得分:0)

添加html2canvas.js的最新版本

https://html2canvas.hertzen.com/dist/html2canvas.js

JSfiddle