API tools faq
paste
Advertisement
MizunoBrasil

Renomeia Arquivo de Imagem e carimba com Data Atual

MizunoBrasil
Jan 29th, 2024 (edited)
1,097
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 4.60 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="pt-br">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="shortcut icon" type="image/jpg" href="favicon.png"/>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Renomear arquivo online e Inserir Data</title>
  8.     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap">
  9.     <style>
  10.         body {
  11.             font-family: 'Poppins', sans-serif;
  12.             background-color: #f0f0f0;
  13.             display: flex;
  14.             align-items: center;
  15.             justify-content: center;
  16.             height: 100vh;
  17.             margin: 0;
  18.         }
  19.  
  20.         .container {
  21.             text-align: center;
  22.             color: #333;
  23.         }
  24.  
  25.         form {
  26.             background-color: #ffffff;
  27.             padding: 20px;
  28.             border-radius: 8px;
  29.             box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  30.             display: flex;
  31.             flex-direction: column;
  32.             align-items: center;
  33.             margin-top: 20px;
  34.         }
  35.  
  36.         input, button {
  37.             margin-bottom: 10px;
  38.             padding: 10px;
  39.             width: 100%;
  40.             box-sizing: border-box;
  41.         }
  42.  
  43.         button {
  44.             cursor: pointer;
  45.             background-color: #0074D9; /* Cor azul */
  46.             color: white;
  47.             border: none;
  48.             border-radius: 4px;
  49.             transition: background-color 0.3s;
  50.         }
  51.  
  52.         button:hover {
  53.             background-color: #0056b3; /* Cor azul mais escura no hover */
  54.         }
  55.     </style>
  56. </head>
  57. <body>
  58.     <form id="uploadForm">
  59.         <label for="fileInput"><h2>Renomear arquivo online e Inserir Data</h2></label>
  60.         <br>O tamanho do arquivo deve ser no máximo 10 MB.<br>
  61.         <p>O nome do arquivo será no formato <b>aaaa-mm-dd-hh-mm-ss</b></p>
  62.         <input type="file" id="fileInput" accept="image/*" required>
  63.  
  64.         <button type="button" onclick="uploadFile()">Enviar</button>
  65.     </form>
  66.  
  67.     <script>
  68.         function uploadFile() {
  69.             var fileInput = document.getElementById('fileInput');
  70.             var file = fileInput.files[0];
  71.  
  72.             // Verificar se um arquivo foi selecionado
  73.             if (!file) {
  74.                 alert("Por favor, selecione um arquivo.");
  75.                 return;
  76.             }
  77.  
  78.             // Verificar o tamanho do arquivo (10 MB = 10 * 1024 * 1024 bytes)
  79.             if (file.size > 10 * 1024 * 1024) {
  80.                 alert("O tamanho do arquivo deve ser no máximo 10 MB.");
  81.                 return;
  82.             }
  83.  
  84.             var currentDate = new Date();
  85.             var uniqueFileName = currentDate.getFullYear() + '-' +
  86.                                  pad(currentDate.getMonth() + 1) + '-' +
  87.                                  pad(currentDate.getDate()) + '-' +
  88.                                  pad(currentDate.getHours()) + '-' +
  89.                                  pad(currentDate.getMinutes()) + '-' +
  90.                                  pad(currentDate.getSeconds());
  91.  
  92.             var fileExtension = file.name.split('.').pop();
  93.             var newFileName = uniqueFileName + "." + fileExtension;
  94.  
  95.             // Criar um canvas para adicionar a data à imagem
  96.             var canvas = document.createElement('canvas');
  97.             var ctx = canvas.getContext('2d');
  98.             var img = new Image();
  99.  
  100.             img.onload = function() {
  101.                 canvas.width = img.width;
  102.                 canvas.height = img.height;
  103.                 ctx.drawImage(img, 0, 0);
  104.                 ctx.font = 'bold 40px Arial'; // Aumentando o tamanho da fonte
  105.                 ctx.fillStyle = '#FFFFFF';
  106.                 ctx.textAlign = 'right';
  107.                 ctx.textBaseline = 'bottom';
  108.                 ctx.fillText(pad(currentDate.getDate()) + '/' +
  109.                              pad(currentDate.getMonth() + 1) + '/' +
  110.                              currentDate.getFullYear(),
  111.                              canvas.width - 10, canvas.height - 10);
  112.  
  113.                 canvas.toBlob(function(blob) {
  114.                     var link = document.createElement('a');
  115.                     link.href = window.URL.createObjectURL(blob);
  116.                     link.download = newFileName;
  117.                     document.body.appendChild(link);
  118.                     link.click();
  119.                     document.body.removeChild(link);
  120.                 }, file.type);
  121.             };
  122.  
  123.             img.src = URL.createObjectURL(file);
  124.         }
  125.  
  126.         function pad(number) {
  127.             return (number < 10 ? '0' : '') + number;
  128.         }
  129.     </script>
  130. </body>
  131. </html>
  132.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!