Online Photo Editor
CSS (styles.css):
css
Copy code
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
background-color: #f5f5f5;
}
.container {
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-top: 20px;
}
h1 {
color: #333;
}
input[type="file"] {
margin-bottom: 20px;
}
canvas {
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 20px;
}
#controls {
display: flex;
flex-direction: column;
align-items: center;
}
label {
margin-bottom: 5px;
}
input[type="range"] {
width: 80%;
margin-bottom: 10px;
}
JavaScript (script.js):
javascript
Copy code
document.addEventListener('DOMContentLoaded', function () {
const imageInput = document.getElementById('imageInput');
const editorCanvas = document.getElementById('editorCanvas');
const brightnessInput = document.getElementById('brightness');
const contrastInput = document.getElementById('contrast');
const saturationInput = document.getElementById('saturation');
let currentImage = null;
imageInput.addEventListener('change', function () {
const file = imageInput.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function (e) {
const img = new Image();
img.onload = function () {
editorCanvas.width = img.width;
editorCanvas.height = img.height;
const ctx = editorCanvas.getContext('2d');
ctx.drawImage(img, 0, 0);
currentImage = img;
applyFilters();
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
}
});
brightnessInput.addEventListener('input', applyFilters);
contrastInput.addEventListener('input', applyFilters);
saturationInput.addEventListener('input', applyFilters);
function applyFilters() {
if (!currentImage) return;
Caman('#editorCanvas', function () {
this.revert(false);
this.brightness(brightnessInput.value);
this.contrast(contrastInput.value);
this.saturation(saturationInput.value);
this.render();
});
}
});
