Colocar Data em Fotos

<!DOCTYPE html>
<html>
  <head>
 <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo de marca d'água com data em HTML e JavaScript</title>
  </head>
  <body>
    <h1>Exemplo de marca d'água com data em HTML e JavaScript</h1>

    <p>Selecione uma imagem e clique em "Enviar" para adicionar a marca d'água com a data atual:</p>

    <form>
      <label for="imagem">Selecione uma imagem:</label>
      <input type="file" id="imagem" name="imagem"><br><br>

      <button type="submit" id="enviar" onclick="adicionarMarcaDagua()">Enviar</button>
    </form>

    <script>
      function adicionarMarcaDagua() {
        // Obter a imagem selecionada pelo usuário
        var imagem = document.getElementById("imagem").files[0];

        // Criar um objeto do tipo FileReader para ler a imagem
        var leitor = new FileReader();

        // Adicionar uma função de escuta ao objeto leitor que será executada quando a imagem for lida
        leitor.onload = function(event) {
          // Criar um objeto de imagem para a imagem lida
          var img = new Image();
          img.onload = function() {
            // Obter o contexto do canvas
            var canvas = document.createElement("canvas");
            var ctx = canvas.getContext("2d");

            // Definir o tamanho do canvas com base no tamanho da imagem
            canvas.width = img.width;
            canvas.height = img.height;

            // Desenhar a imagem no canvas
            ctx.drawImage(img, 0, 0);

            // Adicionar a marca d'água no canvas
            var dataAtual = new Date();
            var dia = dataAtual.getDate();
            var mes = dataAtual.getMonth() + 1;
            var ano = dataAtual.getFullYear();
            var marcaDagua = dia + '/' + mes + '/' + ano;
            ctx.font = "20px Arial";
            ctx.fillStyle = "white";
            ctx.textAlign = "right";
            ctx.fillText(marcaDagua, canvas.width-10, canvas.height-10);

            // Obter a nova imagem com a marca d'água
            var novaImagem = canvas.toDataURL("image/png");

            // Criar um link para baixar a nova imagem
            var link = document.createElement("a");
            link.href = novaImagem;
            link.download = "imagem_com_marca_dagua.png";
            document.body.appendChild(link);

            // Clicar no link para baixar a nova imagem
            link.click();

            // Remover o link da página
            document.body.removeChild(link);
          }
          img.src = event.target.result;
        }
        leitor.readAsDataURL(imagem);
      }
    </script>
  </body>
</html>