Redimensiona Imagem


<!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">
    <script>
      function uploadImage(input) {
        var reader = new FileReader();
        reader.onload = function (event) {
          var image = new Image();
          image.onload = function () {
            var select = document.getElementById("dimensions");
            var dimensions = select.options[select.selectedIndex].value.split("x");
            var width = parseInt(dimensions[0]);
            var height = parseInt(dimensions[1]);
            var canvas = document.createElement("canvas");
            canvas.width = width;
            canvas.height = height;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(image, 0, 0, width, height);
            document.getElementById("image").src = canvas.toDataURL();
            document.getElementById("downloadButton").style.display = "block";
            document.getElementById("image").style.display = "block";
          };
          image.src = event.target.result;
        };
        reader.readAsDataURL(input.files[0]);
      }

      function downloadImage() {
        var image = document.getElementById("image");
        var link = document.createElement("a");
        link.download = "resized-image.jpg";
        link.href = image.src;
        link.click();
      }
    </script>
  </head>
  <body>
      <h1>Redimensiona Imagem</h1>
  <br><br>
   Escolha primeiro a dimensão que deseja a sua imagem e depois escolha o arquivo:
  <br><br>
    <select id="dimensions">
      <option value="640x360">640x360</option>
      <option value="848x480">848x480</option>
      <option value="1280x720">1280x720</option>
      <option value="1920x1080">1920x1080</option>
    </select>
    <br><br>
    <input type="file" onchange="uploadImage(this)">
    <br><br>
    <img id="image" src="" style="display: none">
    <br><br>
    <button id="downloadButton" onclick="downloadImage()" style="display: none">Baixar imagem</button>
  </body>
</html>