Using the Cropper.js Plugin
Cropper.js is a lightweight JavaScript library specifically designed for image cropping in web applications. It provides a intuitive interface where users can select, resize, and extract specific regions of an image direct in the browser.
Key capabilities include:
- Interactive selection of rectangular crop regions with real-time preview
- Support for aspect ratio constraints and customizable crop box dimensions
- Built-in zoom and rotation controls for precise adjustments
- Export functionality generating Base64 strings or Blob objects for server upload
- Highly configurable options for aspect ratio, minimum/maximum crop size, and visual styling
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Cropping Demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css">
<style>
.preview-container {
max-width: 100%;
margin: 20px 0;
}
.result-container {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Image Cropper</h1>
<input type="file" id="fileSelector" accept="image/*">
<div class="preview-container">
<img id="sourceImage" src="" alt="Source image">
</div>
<button id="executeCrop" style="display: none">Crop Image</button>
<div class="result-container">
<img id="outputImage" src="" alt="Result">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>
<script>
const fileSelector = document.getElementById('fileSelector');
const sourceImage = document.getElementById('sourceImage');
const executeCropBtn = document.getElementById('executeCrop');
const outputImage = document.getElementById('outputImage');
let cropperInstance = null;
fileSelector.addEventListener('change', function(e) {
const selectedFile = e.target.files[0];
if (selectedFile) {
const reader = new FileReader();
reader.onload = function(readerEvent) {
sourceImage.src = readerEvent.target.result;
sourceImage.onload = function() {
if (cropperInstance) {
cropperInstance.destroy();
}
cropperInstance = new Cropper(sourceImage, {
aspectRatio: 1 / 1,
viewMode: 1,
dragMode: 'move',
autoCropArea: 0.8,
cropBoxMovable: true,
cropBoxResizable: true,
background: true
});
executeCropBtn.style.display = 'inline-block';
};
};
reader.readAsDataURL(selectedFile);
}
});
executeCropBtn.addEventListener('click', function() {
if (cropperInstance) {
const croppedCanvas = cropperInstance.getCroppedCanvas();
const dataUrl = croppedCanvas.toDataURL('image/png');
outputImage.src = dataUrl;
console.log('Cropped image data:', dataUrl);
}
});
</script>
</body>
</html>
Vanilla JavaScript Implementation
For projects where adding dependencies is not desirable, a custom implementation using Canvas API and mouse event handlers provides complete control over the cropping behavior.
This approach involves tracking mouse coordinates to define the selection rectangle, rendering the image on a canvas element, and extracting the cropped region into a new canvas for export.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas Image Cropper</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
#drawingCanvas {
border: 2px solid #333;
cursor: crosshair;
display: block;
margin: 10px 0;
}
.btn-group {
margin: 15px 0;
}
button {
padding: 10px 20px;
font-size: 14px;
}
#finalResult {
margin-top: 20px;
max-width: 100%;
}
</style>
</head>
<body>
<h2>Canvas-Based Image Cropper</h2>
<input type="file" id="imageInput" accept="image/*">
<div class="btn-group">
<button id="cropBtn">Crop Selection</button>
</div>
<canvas id="drawingCanvas" width="600" height="500"></canvas>
<img id="finalResult" alt="Cropped result">
<script>
const imageInput = document.getElementById('imageInput');
const drawingCanvas = document.getElementById('drawingCanvas');
const ctx = drawingCanvas.getContext('2d');
const cropBtn = document.getElementById('cropBtn');
const finalResult = document.getElementById('finalResult');
let loadedImage = new Image();
let selectionStartX = 0;
let selectionStartY = 0;
let selectionEndX = 0;
let selectionEndY = 0;
let isSelecting = false;
let baseWidth = 0;
let baseHeight = 0;
let resizeRatio = 1;
imageInput.addEventListener('change', function(e) {
const selectedFile = e.target.files[0];
const reader = new FileReader();
const maxWidth = 800;
const maxHeight = 600;
reader.onload = function(e) {
loadedImage.src = e.target.result;
loadedImage.onload = function() {
baseWidth = loadedImage.width;
baseHeight = loadedImage.height;
if (baseWidth > maxWidth || baseHeight > maxHeight) {
resizeRatio = Math.min(maxWidth / baseWidth, maxHeight / baseHeight);
}
const displayWidth = baseWidth * resizeRatio;
const displayHeight = baseHeight * resizeRatio;
drawingCanvas.width = displayWidth;
drawingCanvas.height = displayHeight;
ctx.drawImage(loadedImage, 0, 0, displayWidth, displayHeight);
};
};
reader.readAsDataURL(selectedFile);
});
drawingCanvas.addEventListener('mousedown', function(e) {
selectionStartX = e.offsetX;
selectionStartY = e.offsetY;
isSelecting = true;
});
drawingCanvas.addEventListener('mousemove', function(e) {
if (isSelecting) {
selectionEndX = e.offsetX;
selectionEndY = e.offsetY;
ctx.clearRect(0, 0, drawingCanvas.width, drawingCanvas.height);
ctx.drawImage(loadedImage, 0, 0, drawingCanvas.width, drawingCanvas.height);
ctx.strokeStyle = '#ff0000';
ctx.lineWidth = 2;
ctx.strokeRect(
selectionStartX,
selectionStartY,
selectionEndX - selectionStartX,
selectionEndY - selectionStartY
);
}
});
drawingCanvas.addEventListener('mouseup', function() {
isSelecting = false;
});
cropBtn.addEventListener('click', function() {
const rectWidth = Math.abs(selectionEndX - selectionStartX);
const rectHeight = Math.abs(selectionEndY - selectionStartY);
if (rectWidth === 0 || rectHeight === 0) {
alert('Please select an area first');
return;
}
const rectX = Math.min(selectionStartX, selectionEndX);
const rectY = Math.min(selectionStartY, selectionEndY);
const outputCanvas = document.createElement('canvas');
outputCanvas.width = rectWidth;
outputCanvas.height = rectHeight;
const outputCtx = outputCanvas.getContext('2d');
outputCtx.drawImage(
loadedImage,
rectX / resizeRatio,
rectY / resizeRatio,
rectWidth / resizeRatio,
rectHeight / resizeRatio,
0,
0,
rectWidth,
rectHeight
);
const resultDataUrl = outputCanvas.toDataURL('image/png');
console.log('Cropped output:', resultDataUrl);
finalResult.src = resultDataUrl;
finalResult.style.display = 'block';
});
</script>
</body>
</html>