How to Crop an Image Before Upload in JavaScript

Walter G.

5 minute read

web-development

How to Crop an Image Before Upload in JavaScript

Letting users crop their images before uploading improves both user experience and backend efficiency. Whether it’s a profile picture, product image, or digital artwork, cropping gives control to the user and reduces server load.

In this tutorial, we’ll walk through how to build a complete image crop tool using plain HTML, CSS, and JavaScript, no libraries, no frameworks.

🧰 What We’re Building

User selects an image file.
The image is displayed on a <canvas>.
User draws a cropping rectangle.
The cropped region is rendered as a preview.
The cropped image is converted to a Blob and is ready to be uploaded.

Demo

Select an Image

📄 Full HTML + JS Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Image Crop Tool</title>
 <style>
    body { font-family: sans-serif; padding: 20px; }
    .canvas-container {
      width: 100%;
      max-width: 100%;
      position: relative;
    }
    canvas {
      width: 100%;
      height: auto;
      display: block;
      border: 1px solid #ccc;
      cursor: crosshair;
    }
    #output img {
      max-width: 100%;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <h2>Select an Image</h2>
  <input type="file" id="imageInput" accept="image/*" />
  <br><br>
  <canvas id="canvas" width="500" height="500"></canvas>
  <br>
  <button id="cropBtn">Crop</button>
  <div id="output"></div>

  <script>
     const imageInput = document.getElementById('imageInput');
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const cropBtn = document.getElementById('cropBtn');
    const output = document.getElementById('output');

    let image = new Image();
    let imgLoaded = false;
    let startX, startY, endX, endY;
    let isDrawing = false;

    let scaleX = 1, scaleY = 1;

    imageInput.addEventListener('change', (e) => {
      const file = e.target.files[0];
      const reader = new FileReader();

      reader.onload = (event) => {
        image.onload = () => {
          canvas.width = image.width;
          canvas.height = image.height;
          scaleCanvas();
          drawImage();
          imgLoaded = true;
        };
        image.src = event.target.result;
      };

      if (file) reader.readAsDataURL(file);
    });

    function scaleCanvas() {
      const displayWidth = canvas.getBoundingClientRect().width;
      scaleX = image.width / displayWidth;
      scaleY = image.height / displayWidth; // assumes same scale for height (can be adjusted)
    }

    function drawImage() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
    }

    canvas.addEventListener('mousedown', (e) => {
  if (!imgLoaded) return;
  const rect = canvas.getBoundingClientRect();
  const scaleX = canvas.width / rect.width;
  const scaleY = canvas.height / rect.height;
  startX = (e.clientX - rect.left) * scaleX;
  startY = (e.clientY - rect.top) * scaleY;
  isDrawing = true;
});

canvas.addEventListener('mousemove', (e) => {
  if (!isDrawing) return;
  const rect = canvas.getBoundingClientRect();
  const scaleX = canvas.width / rect.width;
  const scaleY = canvas.height / rect.height;
  endX = (e.clientX - rect.left) * scaleX;
  endY = (e.clientY - rect.top) * scaleY;
  drawImage();
  ctx.strokeStyle = 'red';
  ctx.lineWidth = 1;
  ctx.strokeRect(startX, startY, endX - startX, endY - startY);
});


    canvas.addEventListener('mouseup', () => {
      isDrawing = false;
    });

    cropBtn.addEventListener('click', () => {
      if (!imgLoaded || startX === undefined || endX === undefined) return;

      const x = Math.min(startX, endX);
      const y = Math.min(startY, endY);
      const width = Math.abs(endX - startX);
      const height = Math.abs(endY - startY);

      const croppedCanvas = document.createElement('canvas');
      const croppedCtx = croppedCanvas.getContext('2d');
      croppedCanvas.width = width;
      croppedCanvas.height = height;

      croppedCtx.drawImage(canvas, x, y, width, height, 0, 0, width, height);
      const dataURL = croppedCanvas.toDataURL('image/png');

      output.innerHTML = `<h3>Cropped Preview:</h3><img src="${dataURL}" alt="Cropped Image" />`;

      croppedCanvas.toBlob((blob) => {
        const formData = new FormData();
        formData.append('croppedImage', blob, 'cropped.png');
        // Optional: upload logic here
      }, 'image/png');
    });

    window.addEventListener('resize', () => {
      if (imgLoaded) {
        scaleCanvas();
      }
    });

  </script>
</body>
</html>

🛠 How It Works

This simple image crop tool uses an HTML canvas element to display and interact with the uploaded image.

When a user selects an image file, it's loaded into an invisible Image object and then drawn to the canvas at full resolution.

Mouse events are used to let the user draw a crop box: on mousedown, we record the starting coordinates, and on mousemove, we draw a red rectangle to show the selected area in real time.

To keep everything precise, especially when the canvas resizes on different screen sizes, we scale the mouse coordinates relative to the actual internal canvas dimensions.

When the user clicks "Crop", we extract the selected area using another temporary canvas, convert it to a PNG image, and show a preview of the result. This keeps everything client-side, no server uploads required.

🧠 Final Thoughts

This tool is lightweight, fast, and easy to integrate into any project. Perfect for profile images, thumbnails, or media uploads in CMS tools. And best of all, you’re giving users more control without hitting your server until everything’s ready.

Walt is a computer scientist, software engineer, startup founder and previous mentor for a coding bootcamp. He has been creating software for the past 20 years.

Last updated on: July 02 2025