/* Basic Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Main Container */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
font-family: Arial, sans-serif;
}

/* Upload Section */
.upload-section {
text-align: center;
margin: 20px 0;
}

#uploadBtn {
background: #25D366;
color: white;
padding: 12px 24px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}

#imageInput {
display: none;
}

/* Editing Tools */
.tools-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 20px;
}

/* Image Preview */
.image-preview {
flex: 1;
min-width: 300px;
position: relative;
max-width: 600px;
margin: 0 auto;
}

#previewImage {
max-width: 100%;
height: auto;
border: 2px dashed #ccc;
}

/* Controls */
.controls {
flex: 1;
min-width: 300px;
}

.control-group {
margin-bottom: 15px;
}

label {
display: block;
margin-bottom: 5px;
color: #333;
}

input[type=”range”] {
width: 100%;
}

.dimensions-input {
display: flex;
gap: 10px;
margin-top: 10px;
}

.dimensions-input input {
width: 100px;
padding: 5px;
}

/* Download Button */
#downloadBtn {
background: #075E54;
color: white;
padding: 12px 24px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 20px;
width: 100%;
}

/* Responsive Design */
@media (max-width: 768px) {
.tools-container {
flex-direction: column;
}

.image-preview, .controls {
width: 100%;
}
}

WhatsApp DP Editor

Upload Image

Brightness: 100%

Contrast: 100%

Saturation: 100%

Width (px)

Height (px)

Download DP

// Image Handling
let currentImage = null;

document.getElementById(‘uploadBtn’).addEventListener(‘click’, () => {
document.getElementById(‘imageInput’).click();
});

document.getElementById(‘imageInput’).addEventListener(‘change’, function(e) {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(event) {
currentImage = new Image();
currentImage.src = event.target.result;
currentImage.onload = () => {
initEditor(currentImage);
};
};
reader.readAsDataURL(file);
}
});

// Editor Initialization
function initEditor(image) {
const preview = document.getElementById(‘previewImage’);
preview.src = image.src;

// Initialize Cropper.js
const cropper = new Cropper(preview, {
aspectRatio: 1,
viewMode: 1,
autoCropArea: 1,
responsive: true,
guides: false
});

// Update Dimensions
document.getElementById(‘widthInput’).value = image.naturalWidth;
document.getElementById(‘heightInput’).value = image.naturalHeight;

// Apply Filters
const filters = {
brightness: 100,
contrast: 100,
saturation: 100
};

function applyFilters() {
const filter = `brightness(${filters.brightness}%) contrast(${filters.contrast}%) saturate(${filters.saturation}%)`;
cropper.setData({
width: parseInt(document.getElementById(‘widthInput’).value),
height: parseInt(document.getElementById(‘heightInput’).value)
});
cropper.getCroppedCanvas().style.filter = filter;
}

// Event Listeners for Controls
document.getElementById(‘brightness’).addEventListener(‘input’, function() {
document.getElementById(‘brightnessValue’).textContent = this.value;
filters.brightness = this.value;
applyFilters();
});

document.getElementById(‘contrast’).addEventListener(‘input’, function() {
document.getElementById(‘contrastValue’).textContent = this.value;
filters.contrast = this.value;
applyFilters();
});

document.getElementById(‘saturation’).addEventListener(‘input’, function() {
document.getElementById(‘saturationValue’).textContent = this.value;
filters.saturation = this.value;
applyFilters();
});

// Download Handler
document.getElementById(‘downloadBtn’).addEventListener(‘click’, function() {
const canvas = cropper.getCroppedCanvas({
width: parseInt(document.getElementById(‘widthInput’).value),
height: parseInt(document.getElementById(‘heightInput’).value)
});

if (canvas) {
const link = document.createElement(‘a’);
link.download = ‘whatsapp-dp.png’;
link.href = canvas.toDataURL(‘image/png’);
link.click();
}
});
}