Html2canvas file name to leave with date/time

Question

Add date/time when the "html2canvas" file exits. Html is ok, and only ñ brings the file name to date/time. Type: image_datatime.jpg

$('#call').click(function(){
  html2canvas($('#lista'), 
  {
    onrendered: function (canvas) {
      var a = document.createElement('a');
      // toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
      a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
      a.download = 'image.jpg';
      a.click();
    }
  });
});

#lista{
   margin:10% 40%;
}
.button{
   padding:10px;
   font-size:20px;
   margin:0 20px;
}
#test{
   background:#3399cc;
   padding:50px;
}
.x2{
   transform: scale(2,2);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="lista">
    <h1 id="test">imagem</h1>
</div>
     
<center>
    <button id="call" class="button">Download jpg</button>
</center>

Answer 1

You can use the class Date and its methods to form a date and time in the format you want:

const data = new Date();

console.log("Objeto Date:", data);
console.log("Ano:", data.getFullYear());
console.log("Mês:", data.getMonth() + 1 ); //O mês começa em zero
console.log("Dia:", data.getDate());
console.log("Hora:", data.getHours());
console.log("Minutos:", data.getMinutes());
console.log("Segundos:", data.getSeconds());

---

See an example, setting the date in the following format: year + month + day + hour + minutes + seconds.

Being that I used template string to mount the file name:

//Exemplo de função para os números sempre terem dos dígitos, mantendo um zero a esquerda quando for abaixo de dez
function zeroEsquerda(value) {
  return ("00" + value).slice(-2);
}

$('#call').click(function(){
  html2canvas($('#lista'), {
    onrendered: function (canvas) {
      const a = document.createElement('a');
      // toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
      a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");

      const data = new Date();

      a.download = `image_${data.getFullYear()}${zeroEsquerda(data.getMonth()+1)}${zeroEsquerda(data.getDate())}${zeroEsquerda(data.getHours())}${zeroEsquerda(data.getMinutes())}${zeroEsquerda(data.getSeconds())}.jpg`;
      a.click();
    }
  });
});

#lista{
   margin:10% 40%;
}

.button{
   padding:10px;
   font-size:20px;
   margin:0 20px;
}

#test{
   background:#3399cc;
   padding:50px;
}

.x2{
   transform: scale(2,2);
}

<div id="lista">
  <h1 id="test">imagem</h1>
</div>

<center>
  <button id="call" class="button">Download jpg</button>
</center>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>

</script>

To learn more about javascript date formatting, I suggest taking a look at this question

Note: You used the tag center in your example, I have not modified it, but it is important that you know that this tag is obsolete.

---

Documentations:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center