Skip to content

Create Photo editing #181

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
PRAKHAR871 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Create Photo editing #181

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 71 additions & 0 deletions Photo editing
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Photo Editor</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 text-gray-900 min-h-screen flex flex-col items-center justify-center p-4">

<div class="bg-white shadow-lg rounded-2xl p-6 w-full max-w-2xl">
<h1 class="text-3xl font-bold mb-4 text-center">Simple Photo Editor</h1>

<input type="file" accept="image/*" id="upload" class="mb-4 w-full" />
<div class="flex justify-center mb-4">
<canvas id="canvas" class="max-w-full rounded-lg shadow" width="500" height="400"></canvas>
</div>

<div class="grid grid-cols-2 gap-3 mb-4">
<button onclick="applyFilter('grayscale(100%)')" class="btn">Grayscale</button>
<button onclick="applyFilter('brightness(1.5)')" class="btn">Brighten</button>
<button onclick="applyFilter('contrast(200%)')" class="btn">High Contrast</button>
<button onclick="resetImage()" class="btn bg-red-500 hover:bg-red-600">Reset</button>
</div>
</div>

<style>
.btn {
@apply px-4 py-2 bg-blue-500 text-white rounded-xl hover:bg-blue-600 transition;
}
</style>

<script>
const uploadInput = document.getElementById("upload");
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let originalImage = null;

uploadInput.addEventListener("change", (e) => {
const file = e.target.files[0];
if (!file) return;

const reader = new FileReader();
reader.onload = function (event) {
const img = new Image();
img.onload = function () {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
originalImage = ctx.getImageData(0, 0, canvas.width, canvas.height);
};
img.src = event.target.result;
};
reader.readAsDataURL(file);
});

function applyFilter(filter) {
if (!originalImage) return;
ctx.putImageData(originalImage, 0, 0);
canvas.style.filter = filter;
}

function resetImage() {
if (!originalImage) return;
ctx.putImageData(originalImage, 0, 0);
canvas.style.filter = "none";
}
</script>

</body>
</html>