HTML Code for online photo editing tool
Copy paste the below code in notepad
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Photo Editor</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
#canvas {
border: 1px solid #ccc;
margin-top: 20px;
}
button {
margin: 10px;
padding: 8px 16px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Online Photo Editor</h1>
<input type="file" id="fileInput">
<br>
<button onclick="resizeImage()">Resize</button>
<button onclick="grayscale()">Grayscale</button>
<button onclick="adjustBrightness()">Brightness</button>
<button onclick="adjustContrast()">Contrast</button>
<button onclick="downloadImage()">Download</button>
<br>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let img = new Image();
function loadImage(event) {
img.onload = function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};
img.src = URL.createObjectURL(event.target.files[0]);
}
function resizeImage() {
canvas.width = img.width / 2;
canvas.height = img.height / 2;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
}
function grayscale() {
let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
let data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
let avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
data[i] = avg;
data[i + 1] = avg;
data[i + 2] = avg;
}
ctx.putImageData(imageData, 0, 0);
}
function adjustBrightness() {
let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
let data = imageData.data;
let adjustment = 20;
for (let i = 0; i < data.length; i += 4) {
data[i] += adjustment;
data[i + 1] += adjustment;
data[i + 2] += adjustment;
}
ctx.putImageData(imageData, 0, 0);
}
function adjustContrast() {
let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
let data = imageData.data;
let factor = (259 * (100 + 50)) / (255 * (259 - 50));
for (let i = 0; i < data.length; i += 4) {
data[i] = factor * (data[i] - 128) + 128;
data[i + 1] = factor * (data[i + 1] - 128) + 128;
data[i + 2] = factor * (data[i + 2] - 128) + 128;
}
ctx.putImageData(imageData, 0, 0);
}
function downloadImage() {
let download = document.createElement('a');
download.href = canvas.toDataURL();
download.download = 'edited_image.png';
download.click();
}
document.getElementById('fileInput').addEventListener('change', loadImage, false);
</script>
</body>
</html>
