html2canvas 生成一个空白图像答案

【问题标题】：html2canvas generates a blank imagehtml2canvas 生成一个空白图像
【发布时间】：2019-10-22 21:51:59
【问题描述】：

经过一番谷歌搜索后，我无法理解为什么这个脚本不起作用。目标是有一个按钮，当单击该按钮时，将生成我的 div 的图像下载，并带有 id 保存。

目前，单击下载按钮会生成图像下载，但图像始终为空白/空。为什么它没有成功抓取我的div？

这是我的html：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
</head>

<body>
    <div class="save" id='save'>
        <div class="center">
            <h1 class="alignleft">This is a heading</h1>
            <p class="alignright"><a href="https://twitter.com/mrjpweaver">@asdf</a></p>
            <div style="clear: both;"></div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus placerat fringilla. Sed rutrum tortor et lobortis egestas. Morbi cursus, ex nec pharetra fringilla, nisl libero convallis leo, vitae volutpat arcu enim in mi. Suspendisse a enim molestie justo laoreet fermentum at ac neque. Donec vel cursus orci, vel blandit est. Suspendisse fringilla vel nulla quis mollis. Mauris orci urna, dignissim id erat a, posuere congue turpis. Integer blandit sed felis ut vehicula. Phasellus et dui quis orci dictum vulputate. Pellentesque pretium eget diam et euismod. Nunc rutrum vehicula nisl, at sagittis enim sollicitudin quis.<br>

            Mauris et sagittis eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In hac habitasse platea dictumst. Nam ante ante, faucibus nec dapibus a, tristique ac turpis. Maecenas at ipsum a mauris luctus blandit. Nam convallis lacus dui, pulvinar interdum arcu malesuada id. Integer convallis semper purus in sodales. Mauris ac laoreet augue.</p>

            <div class="nav">
                <a href="blue.html">next -></a>
            </div>

                 <a id="btn-Convert-Html2Image" href="#">Download</a>
                <br />
                <div id="previewImage" style="display: none;">
                </div>
        </div>
    </div>

  <script>
        $(document).ready(function () {
            var element = $("#save"); // global variable
            var getCanvas; // global variable

            html2canvas(element, {
                onrendered: function (canvas) {
                    $("#previewImage").append(canvas);
                    getCanvas = canvas;
                }
            });

            $("#btn-Convert-Html2Image").on('click', function () {
                var imgageData = getCanvas.toDataURL("image/png");
                // Now browser starts downloading it instead of just showing it
                var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
                $("#btn-Convert-Html2Image").attr("download", "poem.png").attr("href", newData);
            });
        });

    </script>

</body>
</html>

【问题讨论】：

标签： html2canvas

【解决方案1】：

尝试添加对 JQuery UI 的引用：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

这个小提琴对我来说很好用：

https://jsfiddle.net/n5gcbstu/

小提琴和您的代码的唯一区别似乎是 我也引用了 JQueryUI。

【讨论】：

我将该引用粘贴到我的 html 标头中，但仍然没有运气。它在那个小提琴中完美无缺，但在我的服务器上却没有。也许我需要在服务器上添加一个库或其他东西？这里有点不知所措。感谢您的帮助！
我发现了问题所在。它与引用 JQuery UI 无关，它是我用来使我的 div 居中的一些 CSS。感谢您的帮助！

【解决方案2】：

代码在没有 Jquery UI 参考的情况下工作，是我的 CSS 以 div 为中心把它搞砸了。用这个 CSS 替换，生活很好：

.center {
    margin: auto;
    height: 500px;
    width: 500px;
}
body {
    background-color: lightgrey;
    height: 100%;
    display: grid;
}

【讨论】：

你能发布一个不能正常工作的吗？谢谢