search

bubkoo / html-to-image

āœ‚ļø Generates an image from a DOM node using HTML5 canvas and SVG.
MIT License
5.4k stars 505 forks source link

how does it work #372

Closed micuit-cuit closed 2 weeks ago

micuit-cuit commented 1 year ago

I've been trying for a while but my best result is an empty image


<html>
    <head>
        <title>message generator</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
        <script src="script.js"></script>
        <script src="https://kit.fontawesome.com/f048ac3c36.js" crossorigin="anonymous"></script>
    </head>
    <body>
        <div id="main" class="main">
            <button onclick="captur()">capture</button>
        </div>
        </div>
        <div id="smartfone" class="smartfone">
            <div id="smartfone__top" class="smartfone__top">
                <div id="smartfone__top__1" class="smartfone__top__1 smartfone__top__bar"><p id="top__heur" class="top__heur">{heur}</p> <div id="top__baterie" class="top__baterie"><i class="fa-solid fa-battery-three-quarters"></i> <p>75%</p></div></div>
                <div id="smartfone__top__2" class="smartfone__top__2 smartfone__top__bar"><i class="fa-solid fa-chevron-left top__arrow"></i><p id="top__titre" class="top__titre">{titre}</p><div id="top__plus" class="top__plus"><i class="fa-solid fa-phone"></i><i class="fa-solid fa-bars"></i></div></div>
            </div>
            <div id="smartfone__main" class="smartfone__main"></div>
            <div id="smartfone__bottom" class="smartfone__bottom">
                <i class="fa-solid fa-circle-plus"></i>
                <input id="bottom__input" class="bottom__input" type="text" placeholder="{NewMessagePrompt}">
            </div>
        </div>
    </body>
    <script src="/html-to-image.js"></script>
    <script src="/download.js"></script>
    <script>
function captur(){

    htmlToImage.toPng(document.getElementById('smartfone'))
  .then(function (dataUrl) {
    download(dataUrl, 'my-node.png');
  });
}
</script>

</html>```
![image](https://user-images.githubusercontent.com/89157073/217965606-6242191c-b250-4fc9-a0cf-2bd165022d9a.png)
vivcat[bot] commented 1 year ago

šŸ‘‹ @micuit-cuit

Thanks for opening your first issue here! If you're reporting a šŸž bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.