Você pode utilizar a classe Date
e seus métodos para formar uma data e hora no formato que desejar:
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());
Veja um exemplo, montando a data no seguinte formato: ano + mês + dia + hora + minutos + segundos.
Sendo que utilizei template string
para montar o nome do arquivo:
//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>
Para saber mais sobre formatação de data em javascript, sugiro dar uma olhada nessa pergunta
Obs: Você utilizou a tag center
em seu exemplo, não modifiquei a mesma, mas é importante que saiba que essa tag encontra-se obsoleta.
Documentações:
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/template_strings
https://developer.mozilla.org/pt-BR/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/pt-BR/docs/Web/HTML/Element/center