使用 toDataURL() 将画布转换为图像并添加到 pdf答案

【问题标题】：Transform canvas to image using toDataURL() and add to pdf使用 toDataURL() 将画布转换为图像并添加到 pdf
【发布时间】：2019-04-20 04:53:36
【问题描述】：

我执行：

<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 会打开并下载。但是当我使用画布 toDataurl 时，什么也没发生。我真的不知道为什么。我尝试从其他问题复制和粘贴代码，但它们都不适合我。当我点击 id="down_but" 的下载按钮时，它只会在开发控制台中给出错误。

See console error image

我尝试了任何方法，但没有任何帮助。如果有人知道问题出在哪里，请帮助我。我也为它创建了JSFiddle。

【问题讨论】：

你的小提琴里面有语法错误
@Muath 请问在哪里？我刚查了一下，不知道在哪里
当我运行小提琴时，我没有收到您询问的错误信息：未捕获的 ReferenceError: html2canvas 未定义
刚刚改了库地址jsfiddle.net/cpL5qt72这是你需要的吗？？
@Muath 谢谢老兄！它有效

标签： javascript jquery html jspdf html2canvas

【解决方案1】：

添加html2canvas.js的最新版本

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

JSfiddle

【讨论】：