API tools faq
paste
Advertisement
MizunoBrasil

Renomeia Arquivo de Imagem, carimba com Data Atual com Opção de Inserir Descrição da Imagem

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