Advanced image cropping online
/* General Styles */
body {
font-family: ‘Poppins’, sans-serif;
text-align: center;
color: #333;
margin: 0;
}
.container {
border-radius: 10px;
box-shadow: 0 0px 0px rgba(0, 0, 0, 0.0);
}
h2 {
color: #444;
margin-bottom: 20px;
}
/* Upload Section */
.upload-section {
margin-bottom: 20px;
}
.upload-box {
display: flex;
align-items: center;
justify-content: center;
border: 2px dashed #007bff;
border-radius: 8px;
padding: 15px;
background: #eef6ff;
cursor: pointer;
transition: background 0.3s ease;
}
.upload-box:hover {
background: #d0e4ff;
}
.upload-box input {
display: none;
}
.upload-text {
font-size: 16px;
color: #007bff;
}
.error-message {
color: red;
font-size: 14px;
margin-top: 10px;
}
/* Aspect Ratio Selection */
.aspect-ratio {
margin: 15px 0;
}
.aspect-ratio select {
padding: 8px;
border-radius: 5px;
border: 1px solid #ddd;
font-size: 14px;
}
/* Crop & Preview Wrapper */
.crop-preview-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
margin-top: 20px;
}
/* Cropping Area */
.crop-container, .preview-container {
flex: 1;
max-width: 48%;
height: 250px;
display: flex;
align-items: center;
justify-content: center;
border: 2px dashed #bbb;
border-radius: 8px;
background: #fafafa;
overflow: hidden;
}
.crop-container img {
max-width: 100%;
max-height: 100%;
display: block;
}
/* Preview Section */
.preview-container img {
max-width: 100%;
max-height: 100%;
border: 0px solid #007bff;
border-radius: 5px;
}
/* Controls Wrapper */
.controls {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 20px;
}
/* First row: Zoom & Rotate */
.control-row {
display: flex;
justify-content: center;
gap: 10px;
}
/* Second row: Reset, Preview, Download */
.control-bottom {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 10px;
}
.controls button {
background: #007bff;
color: white;
border: none;
padding: 10px 15px;
cursor: pointer;
border-radius: 5px;
transition: background 0.3s ease;
font-size: 14px;
background: linear-gradient(135deg, #007bff, #0056b3);
transition: all 0.3s ease;
}
.controls button:hover {
background: #0056b3;
}
/* Responsive Design */
@media (max-width: 768px) {
.crop-preview-wrapper {
flex-direction: column;
}
.crop-container, .preview-container {
max-width: 100%;
height: 200px;
}
}
Advanced Photo Cropping
Aspect Ratio:
1:1
16:9
4:3
Free
Zoom In
Zoom Out
Rotate Left
Rotate Right
Reset
Show Preview
Download
https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js
let cropper;
document.getElementById(‘upload’).addEventListener(‘change’, function(event) {
const file = event.target.files[0];
if (!file) {
document.getElementById(‘errorMessage’).textContent = “Please select an image file.”;
return;
}
document.getElementById(‘errorMessage’).textContent = “”;
const reader = new FileReader();
reader.onload = function(e) {
document.getElementById(‘image’).src = e.target.result;
if (cropper) {
cropper.destroy();
}
cropper = new Cropper(document.getElementById(‘image’), {
aspectRatio: 1,
viewMode: 2,
});
};
reader.readAsDataURL(file);
});
document.getElementById(‘aspectRatio’).addEventListener(‘change’, function() {
const ratio = this.value === “free” ? NaN : parseFloat(this.value);
cropper.setAspectRatio(ratio);
});
function zoomIn() { cropper.zoom(0.1); }
function zoomOut() { cropper.zoom(-0.1); }
function rotateLeft() { cropper.rotate(-45); }
function rotateRight() { cropper.rotate(45); }
function resetCrop() { cropper.reset(); }
function showFinalPreview() {
const canvas = cropper.getCroppedCanvas();
if (!canvas) return alert(‘Please upload and crop an image first.’);
document.getElementById(‘finalPreview’).src = canvas.toDataURL(‘image/png’);
}
function downloadCrop() {
const canvas = cropper.getCroppedCanvas();
if (!canvas) return alert(‘Please upload and crop an image first.’);
const link = document.createElement(‘a’);
link.href = canvas.toDataURL(‘image/png’);
link.download = ‘cropped-image.png’;
link.click();
}
Gkguru 