Add footer before download image using dom to image and filesaver

user_14787718 0
Viewed 397

im using dom-to-image and filesaver to convert html to image but i dont know how to add custom text as footer before generate the image.

This is my code:

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>
<script src="https://cdn.jsdelivr.net/g/filesaver.js"></script>
<style>
.test{
width:300px;
height:300px;
border:1px solid #ddd;
}
</style>
<body>
<button class="btn btn-success" id="button">Save Image</button>
<div id="test" class="test">
abcd
</div>

    <script>
$(document).ready(function(){
 $("#button").click(function(){
  domtoimage.toBlob(document.getElementById("test"))
   .then(function(blob){
     window.saveAs(blob,"output.png");
   });
 });
});
    </script>
</body>

enter image description here

jquery
2 Answers

I think you are looking for this output..Please let me know...Is this the thing you wanted. Just copy paste the code and run the code

  <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>
    <script src="https://cdn.jsdelivr.net/g/filesaver.js"></script>
    <style>
        .test {
            width: 300px;
            height: 300px;
            border: 1px solid #ddd;
        }
        
        #footer {
            display: none;
            margin-top: 200px;
        }
    </style>
</head>

<body>
    <button class="btn btn-success" id="button">Save Image</button>
    <div id="test" class="test">
        <h1>abcd</h1>
        <div class="footer" id="footer">
            <div class="text-white text-center p-3 bg-primary">
                <div class="copyright">
                    <strong><span>TGClickography</span></strong>
                </div>

            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $("#button").click(function() {
                $("#footer").show();
                domtoimage.toBlob(document.getElementById("test"))
                    .then(function(blob) {
                        window.saveAs(blob, "output.png");
                        $("#footer").hide();
                    });
            });
        });
    </script>
</body>

</html>
user_148065150

You can create a div for the footer using jQuery before exporting and then remove it afterwards.

Here is a simple example where we create the div for the footer & append it to the existing div:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example</title>
</head>
<body>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/g/filesaver.js"></script>

  <style>
    .test {
      width: 300px;
      height: 300px;
      border: 1px solid #ddd;
      position: relative;
    }

    .footer {
      position: absolute;
      bottom: 0px;
      display: flex;
      justify-content: center;
      margin: auto;
      width: 100%;
      background: cyan;
      text-align: center;
    }
  </style>

  <button class="btn btn-success" id="button">Save Image</button>
  <p>
  <div id="test" class="test">
    abcd
  </div>

  <script type="text/javascript">
    $(document).ready(() => {
      $("#button").click(() => {
        const footer = $('<div></div>').attr('id', 'footer').attr('class', 'footer').text('custom footer');
        $('#test').append(footer);
        domtoimage.toBlob(document.getElementById('test'))
        .then((blob) => {
          window.saveAs(blob, 'output.png');
          footer.remove();
        });
      });
    });
  </script>
</body>
</html>

Alternatively, this version formats the footer as an oval shape (it uses a span for the footer text content inside an outer div for the footer itself):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example</title>
</head>
<body>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/g/filesaver.js"></script>

  <style>
    .test {
      width: 300px;
      height: 300px;
      border: 1px solid #ddd;
      position: relative;
    }

    .footer {
      position: absolute;
      bottom: 0px;
      display: flex;
      justify-content: center;
      margin: auto;
      width: 100%;
      background: cyan;
      border-radius: 80%;
      height: 20%;
      text-align: center;
    }

    .footer-text {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>

  <button class="btn btn-success" id="button">Save Image</button>
  <p>
  <div id="test" class="test">
    abcd
  </div>

  <script type="text/javascript">
    $(document).ready(() => {
      $("#button").click(() => {
        const footerSpan = $('<span></span>').attr('class', 'footer-text').text('custom footer');
        const footer = $('<div></div>').attr('id', 'footer').attr('class', 'footer');
        $(footer).append(footerSpan);
        $('#test').append(footer);
        domtoimage.toBlob(document.getElementById('test'))
        .then((blob) => {
          window.saveAs(blob, 'output.png');
          footer.remove();
        });
      });
    });
  </script>
</body>
</html>

[It seems the file download can't be triggered within a live snippet, so you'll have to copy and run locally to test out]

Note that both of these solutions use flexbox for the alignment/centering.

user_147225620
Related