Put html code

Max Marin

  • Posts: 21
I was seeing that someone wants to take a screenshot of the game in html5, and I found a way to do it in html, so if you can put html, they would have to put this code and that's it:
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<div>
    <a id="a-make" href="#">Make a screenshot[/url]
    <a id="a-download" href="#" style="display:none;">Download a screenshot[/url]
</div>

<div id="main">
    <div id="screenshot">
        ...
    </div>
</div>


<script>
    function makeScreenshot()
    {
        html2canvas(document.getElementById("screenshot"), {scale: 2}).then(canvas =>
        {
            canvas.id = "canvasID";
            var main = document.getElementById("main");
            while (main.firstChild) { main.removeChild(main.firstChild); }
            main.appendChild(canvas);
        });
    }

    document.getElementById("a-make").addEventListener('click', function()
    {
        document.getElementById("a-make").style.display = "none";
        makeScreenshot();
        document.getElementById("a-download").style.display = "inline";
    }, false);

    document.getElementById("a-download").addEventListener('click', function()
    {
        this.href = document.getElementById("canvasID").toDataURL();
        this.download = "canvas-image.png";
    }, false);
</script>

merrak

  • *
  • Posts: 2611
That's neat! Where did you find it? It'd be nice to have the instructions on how to use the script.

Max Marin

  • Posts: 21
Sorry for answering so late. I think I found it here (looking for: screenshot in html);D
https://retifrav.github.io/blog/2018/07/23/html-js-screenshot/