Simple Photo Editor Code for Beginners
Simple Photo Editor Code Using HTML & JavaScript
Agar aapko ek chhota sa online photo editor banana hai bina kisi app ke, to yeh simple code aapke liye best hai. Aap is code se apne image ko upload karke uspar grey filter apply kar sakte ho.
🔧 Code:
<!DOCTYPE html>
<html>
<head>
<title>Simple Photo Editor</title>
<style>
body {
text-align: center;
font-family: Arial;
background-color: #f0f0f0;
padding: 20px;
}
canvas {
border: 1px solid black;
margin-top: 20px;
}
button {
margin: 10px;
padding: 10px 20px;
}
</style>
</head>
<body>
<h2>Upload Image to Edit</h2>
<input type="file" id="upload" accept="image/*"><br>
<canvas id="canvas"></canvas><br>
<button onclick="applyGray()">Make Gray</button>
<button onclick="resetImage()">Reset</button>
<script>
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let originalImage;
document.getElementById('upload').addEventListener('change', function(e) {
let reader = new FileReader();
reader.onload = function(event) {
let img = new Image();
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
originalImage = ctx.getImageData(0, 0, img.width, img.height);
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
});
function applyGray() {
let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
for (let i = 0; i < imageData.data.length; i += 4) {
let avg = (imageData.data[i] + imageData.data[i+1] + imageData.data[i+2]) / 3;
imageData.data[i] = avg;
imageData.data[i+1] = avg;
imageData.data[i+2] = avg;
}
ctx.putImageData(imageData, 0, 0);
}
function resetImage() {
ctx.putImageData(originalImage, 0, 0);
}
</script>
</body>
</html>
📌 What You Can Do With It:
- Upload any image
- Convert it to grey color
- Reset the image to original
Is code ko aap Blogger me HTML mode me paste karke live dekh sakte ho. Ye ek chhota project hai beginners ke liye.
--- ### 🔖 Tags (Labels): `HTML Project`, `JavaScript`, `Photo Editor`, `Beginner Code`, `Free Website Tools` --- Agar aapko isme aur filter, brightness, contrast ya download option add karwana ho to mujhe batao — main aur advanced version bhi de dunga.
Comments
Post a Comment