Html2Canvas 和 Canvas2Image 在页面上不起作用答案

【问题标题】：Html2Canvas and Canvas2Image not work on pageHtml2Canvas 和 Canvas2Image 在页面上不起作用
【发布时间】：2019-08-07 19:14:41
【问题描述】：

我有这个简单的代码将 html 保存为图像：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <script src="js/jquery.js"></script>
    <script src="js/html2canvas.js"></script>
    <script src="js/canvas2image.js"></script>
    <script>
        $('#save').click(function () {
            var elem = $('#element').get(0);
            var leba = "600";
            var ting = "400";
            var type = "bmp";
            var name = "temp"
            html2canvas(elem).then(function (canvas) {
                var cWidth = canvas.width;
                var cHeight = canvas.height;
                var img = Canvas2Image.convertToImage(canvas, cWidth, cHeight);
                $('#preview').after(img);
                Canvas2Image.saveAsImage(canvas, leba, ting, type, name);

            })
        })
    </script>
    <div id="element"
        style="width: 600px; height: 450px; background-color: aquamarine; margin: 30px auto; text-align: center">
        <h1>Screenshot</h1>
        <input type="text" style="background-color: aliceblue; border: 1px solid #aaaaaa; color: #333333">
    </div>
    <div style="text-align: center">
        <button id="save">Salva</button>
        <p id="preview"></p>
    </div>
</body>
</html>

我想预览屏幕截图并在点击时保存它，但是当我点击时没有任何反应。

包含三个脚本的三个文件已正确加载，我使用的是 Visual Studio 代码并且链接正确，但尽管尝试了，但我无法获取图像。

我也试过直接放js链接，但是没有成功，我把脚本直接移到了html标签中（我知道没用），但是我的页面没有给出任何结果。

【问题讨论】：

标签： javascript jquery html web html2canvas

【解决方案1】：

要将画布保存为图像，您可以进行以下更改。我不这么认为，你需要一个库来保存文件。

html2canvas(document.querySelector("#element")).then(function (canvas) {
    var dataURL = canvas.toDataURL("image/jpeg", 1.0);
    var a = document.createElement('a');
    a.href = dataURL;
    a.download = 'untitled.jpeg';
    document.body.appendChild(a);
    a.click();
})

如需完整参考，您可以访问下方添加的 CodePen 链接

https://codepen.io/mukeshmohan/pen/ymvQjV

建议将您的代码包装在准备好的文档中。

$( document ).ready(function() {
   // your script goes here
});

这将使 jquery 等到 dom 渲染完成，从而允许安全和干净的事件处理。

【讨论】：

【解决方案2】：

你需要把你的代码包装在一个

$( document ).ready()

阻止

看看here

【讨论】：