Bootstrap Image Crop Before Upload — Free HTML CSS JS Snippet

<div class="container py-5 d-flex justify-content-center">
  <div class="card bscrop-card">
    <div class="card-body p-4">
      <label class="form-label small fw-semibold">Choose an image</label>
      <input type="file" class="form-control mb-3" id="bscropInput" accept="image/*">

      <div class="d-none" id="bscropEditor">
        <div class="bscrop-frame" id="bscropFrame">
          <img id="bscropImg" draggable="false" alt="">
        </div>
        <label class="form-label small mt-2 mb-1">Zoom</label>
        <input type="range" class="form-range" id="bscropZoom" min="1" max="2.5" step="0.01" value="1">
        <button type="button" class="btn btn-dark btn-sm fw-bold mt-2" id="bscropSave">Save crop</button>
      </div>

      <div class="d-none mt-3" id="bscropResultWrap">
        <p class="small fw-semibold mb-1">Cropped result:</p>
        <canvas id="bscropCanvas" width="160" height="160" class="bscrop-result"></canvas>
      </div>
    </div>
  </div>
</div>

.bscrop-card { width: 340px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
.bscrop-frame {
  position: relative; width: 220px; height: 220px; margin: 0 auto;
  overflow: hidden; border-radius: 10px; background: #14151a; cursor: grab; touch-action: none;
}
.bscrop-frame.bscrop-dragging { cursor: grabbing; }
.bscrop-frame img { position: absolute; left: 0; top: 0; user-select: none; }
.bscrop-result { border-radius: 50%; border: 2px solid #e5e7eb; }

const FRAME = 220;
const OUTPUT = 160;

const input = document.getElementById('bscropInput');
const editor = document.getElementById('bscropEditor');
const frame = document.getElementById('bscropFrame');
const img = document.getElementById('bscropImg');
const zoomSlider = document.getElementById('bscropZoom');
const resultWrap = document.getElementById('bscropResultWrap');
const canvas = document.getElementById('bscropCanvas');

let baseScale = 1;
let offsetX = 0;
let offsetY = 0;
let dragging = false;
let startX = 0, startY = 0, startOffsetX = 0, startOffsetY = 0;

function currentScale() {
  return baseScale * Number(zoomSlider.value);
}

function clampOffsets() {
  const scale = currentScale();
  const w = img.naturalWidth * scale;
  const h = img.naturalHeight * scale;
  offsetX = Math.min(0, Math.max(FRAME - w, offsetX));
  offsetY = Math.min(0, Math.max(FRAME - h, offsetY));
}

function applyTransform() {
  const scale = currentScale();
  img.style.width = (img.naturalWidth * scale) + 'px';
  img.style.height = (img.naturalHeight * scale) + 'px';
  img.style.left = offsetX + 'px';
  img.style.top = offsetY + 'px';
}

function centerImage() {
  const scale = currentScale();
  offsetX = (FRAME - img.naturalWidth * scale) / 2;
  offsetY = (FRAME - img.naturalHeight * scale) / 2;
}

input.addEventListener('change', () => {
  const file = input.files && input.files[0];
  if (!file) return;
  const url = URL.createObjectURL(file);
  img.onload = () => {
    baseScale = Math.max(FRAME / img.naturalWidth, FRAME / img.naturalHeight);
    zoomSlider.value = '1';
    centerImage();
    applyTransform();
    editor.classList.remove('d-none');
    resultWrap.classList.add('d-none');
    URL.revokeObjectURL(url);
  };
  img.src = url;
});

zoomSlider.addEventListener('input', () => {
  clampOffsets();
  applyTransform();
});

frame.addEventListener('pointerdown', e => {
  dragging = true;
  frame.classList.add('bscrop-dragging');
  startX = e.clientX; startY = e.clientY;
  startOffsetX = offsetX; startOffsetY = offsetY;
  frame.setPointerCapture(e.pointerId);
});

frame.addEventListener('pointermove', e => {
  if (!dragging) return;
  offsetX = startOffsetX + (e.clientX - startX);
  offsetY = startOffsetY + (e.clientY - startY);
  clampOffsets();
  applyTransform();
});

['pointerup', 'pointercancel'].forEach(evt =>
  frame.addEventListener(evt, () => { dragging = false; frame.classList.remove('bscrop-dragging'); })
);

document.getElementById('bscropSave').addEventListener('click', () => {
  const scale = currentScale();
  const srcX = -offsetX / scale;
  const srcY = -offsetY / scale;
  const srcSize = FRAME / scale;

  const ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, OUTPUT, OUTPUT);
  ctx.drawImage(img, srcX, srcY, srcSize, srcSize, 0, 0, OUTPUT, OUTPUT);
  resultWrap.classList.remove('d-none');
});