html2canvas создает пустое изображение - PullRequest
Новая
       10

html2canvas создает пустое изображение

0 голосов
/ 21 октября 2019

после некоторого поиска, я так и не смог понять, почему этот скрипт не работает. Цель состоит в том, чтобы иметь кнопку, которая при нажатии генерирует загрузку изображения моего div с сохранением идентификатора.

В настоящее время нажатие кнопки загрузки приводит к загрузке изображения, но изображение всегда пустое / пустое. Почему он не захватывает мой 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>

Ответы [ 2 ]

1 голос
/ 21 октября 2019

Попробуйте добавить ссылку на JQuery UI, а также: 

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

Это прекрасно работает для меня по этой скрипке:

https://jsfiddle.net/n5gcbstu/

Разница только вfiddle и ваш код выглядит так: У меня также есть ссылка на JQueryUI.

0 голосов
/ 22 октября 2019

Код работал без ссылки на Jquery UI, это был мой CSS, центрирующий div, который все испортил. Заменен этим CSS и жизнь хороша: 

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