Advertisement
MizunoBrasil

Automação: Redimensiona imagem e depois deixa baixar

Feb 9th, 2023 (edited)
171
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <script>
  5.       function uploadImage(input) {
  6.         var reader = new FileReader();
  7.         reader.onload = function (event) {
  8.           var image = new Image();
  9.           image.onload = function () {
  10.             var width = parseInt(prompt("Informe a largura desejada:", "1280"));
  11.             var height = parseInt(prompt("Informe a altura desejada:", "720"));
  12.             var canvas = document.createElement("canvas");
  13.             canvas.width = width;
  14.             canvas.height = height;
  15.             var ctx = canvas.getContext("2d");
  16.             ctx.drawImage(image, 0, 0, width, height);
  17.             document.getElementById("image").src = canvas.toDataURL();
  18.             document.getElementById("downloadButton").style.display = "block";
  19.             document.getElementById("image").style.display = "block";
  20.           };
  21.           image.src = event.target.result;
  22.         };
  23.         reader.readAsDataURL(input.files[0]);
  24.       }
  25.  
  26.       function downloadImage() {
  27.         var d = new Date();
  28.         var dateString = d.getDate() + "-" + (d.getMonth() + 1) + "-" + d.getFullYear();
  29.         var timeString = d.getHours() + "-" + d.getMinutes() + "-" + d.getSeconds();
  30.         var image = document.getElementById("image");
  31.         var link = document.createElement("a");
  32.         link.download = dateString + "-" + timeString + "-resized-image.png";
  33.         link.href = image.src;
  34.         link.click();
  35.       }
  36.     </script>
  37.   </head>
  38.   <body>
  39.     <input type="file" onchange="uploadImage(this)">
  40.     <br><br>
  41.     <img id="image" src="" style="display: none">
  42.     <br><br>
  43.     <button id="downloadButton" onclick="downloadImage()" style="display: none">Baixar imagem</button>
  44.   </body>
  45. </html>
  46.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement