<style>

  .resize-box {

    max-width: 500px;

    margin: 20px auto;

    padding: 20px;

    border: 1px solid #ddd;

    border-radius: 12px;

    background: #fff;

    text-align: center;

  }

  input, button {

    padding: 10px;

    margin: 10px 0;

    width: 100%;

    border-radius: 8px;

  }

  canvas {

    width: 100%;

    margin-top: 15px;

    border: 1px solid #ccc;

  }

</style>

<div class="resize-box">

  <h3>Image Resize Tool</h3>

  <input type="file" id="upload" accept="image/*">

  <input type="number" id="width" placeholder="New Width (px)">

  <input type="number" id="height" placeholder="New Height (px)">

  <button onclick="resizeImage()">Resize Image</button>

  <canvas id="canvas"></canvas>

  <a id="downloadLink" style="display:none;" download="resized-image.png">

    <button>Download Resized Image</button>

  </a>

</div>

<script>

let img = new Image();

document.getElementById('upload').addEventListener('change', function(e) {

  let reader = new FileReader();

  reader.onload = function(event) {

    img.onload = function() {

      document.getElementById("width").value = img.width;

      document.getElementById("height").value = img.height;

    }

    img.src = event.target.result;

  }

  reader.readAsDataURL(e.target.files[0]);

});

function resizeImage() {

  let canvas = document.getElementById("canvas");

  let ctx = canvas.getContext("2d");

  let newWidth = parseInt(document.getElementById("width").value);

  let newHeight = parseInt(document.getElementById("height").value);

  canvas.width = newWidth;

  canvas.height = newHeight;

  ctx.drawImage(img, 0, 0, newWidth, newHeight);

  let resizedData = canvas.toDataURL("image/png");

  let downloadLink = document.getElementById("downloadLink");

  downloadLink.href = resizedData;

  downloadLink.style.display = "block";

}

</script>