Skip to content

Commit c564229

Browse files
PBJIPBJI
authored
Merge pull request #879 from harshhere905/CropImage
CropImage/harshhere905
2 parents 8be1f78 + 3c8fa3f commit c564229

File tree

1 file changed

+183
-0
lines changed

1 file changed

+183
-0
lines changed

‎CropImage/harshhere905/index.html‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Image Crop</title>
7+
<style>
8+
body {
9+
font-family: 'Arial', sans-serif;
10+
background-color: #f5f5f5;
11+
text-align: center;
12+
margin: 0;
13+
display: flex;
14+
flex-direction: column;
15+
align-items: center;
16+
justify-content: center;
17+
height: 100vh;
18+
}
19+
20+
#canvasContainer {
21+
position: relative;
22+
margin-top: 20px;
23+
}
24+
25+
#canvas {
26+
border: 2px solid #333;
27+
cursor: crosshair;
28+
background-color: #fff;
29+
}
30+
31+
.input-group {
32+
display: flex;
33+
align-items: center;
34+
margin-bottom: 20px;
35+
}
36+
37+
.input-group input {
38+
padding: 10px;
39+
font-size: 16px;
40+
margin-right: 10px;
41+
border: 2px solid #ccc;
42+
border-radius: 5px;
43+
}
44+
45+
.input-group button {
46+
padding: 10px;
47+
font-size: 16px;
48+
cursor: pointer;
49+
background-color: #3498db;
50+
color: white;
51+
border: none;
52+
border-radius: 5px;
53+
transition: background-color 0.3s;
54+
}
55+
56+
.input-group button:hover {
57+
background-color: #2980b9;
58+
}
59+
60+
.action-buttons button {
61+
margin-top: 10px;
62+
padding: 10px;
63+
font-size: 16px;
64+
cursor: pointer;
65+
background-color: #27ae60;
66+
color: white;
67+
border: none;
68+
border-radius: 5px;
69+
transition: background-color 0.3s;
70+
}
71+
72+
.action-buttons button:hover {
73+
background-color: #219653;
74+
}
75+
76+
#downloadButton {
77+
background-color: #e74c3c;
78+
}
79+
80+
#downloadButton:hover {
81+
background-color: #c0392b;
82+
}
83+
84+
#cropDimensions {
85+
display: flex;
86+
align-items: center;
87+
}
88+
89+
#cropDimensions input {
90+
width: 50px;
91+
margin-right: 10px;
92+
}
93+
</style>
94+
</head>
95+
<body>
96+
97+
<div class="input-group">
98+
<input type="text" id="imageUrl" placeholder="Enter image URL">
99+
<button id="loadImageButton">Load Image</button>
100+
</div>
101+
102+
<div id="cropDimensions">
103+
<span>Crop Dimensions:</span>
104+
<input type="number" id="cropWidth" placeholder="Width">
105+
<input type="number" id="cropHeight" placeholder="Height">
106+
</div>
107+
108+
<div id="canvasContainer">
109+
<canvas id="canvas" width="600" height="400"></canvas>
110+
</div>
111+
112+
<div class="action-buttons">
113+
<button id="cropButton">Crop Image</button>
114+
<button id="resetButton">Reset Canvas</button>
115+
<button id="downloadButton">Download Cropped Image</button>
116+
</div>
117+
118+
<script>
119+
document.addEventListener('DOMContentLoaded', () => {
120+
const canvas = document.getElementById('canvas');
121+
const ctx = canvas.getContext('2d');
122+
let img = new Image();
123+
let crop = false;
124+
let cropWidth = 400;
125+
let cropHeight = 300;
126+
127+
document.getElementById('loadImageButton').addEventListener('click', () => {
128+
const imageUrl = document.getElementById('imageUrl').value;
129+
img.src = imageUrl;
130+
});
131+
132+
document.getElementById('cropButton').addEventListener('click', () => {
133+
crop = true;
134+
drawImage();
135+
});
136+
137+
document.getElementById('resetButton').addEventListener('click', () => {
138+
crop = false;
139+
drawImage();
140+
});
141+
142+
document.getElementById('downloadButton').addEventListener('click', () => {
143+
if (crop) {
144+
const dataUrl = canvas.toDataURL();
145+
const a = document.createElement('a');
146+
a.href = dataUrl;
147+
a.download = 'cropped_image.png';
148+
a.click();
149+
}
150+
});
151+
152+
document.getElementById('cropWidth').addEventListener('change', (event) => {
153+
cropWidth = parseInt(event.target.value) || 0;
154+
drawImage();
155+
});
156+
157+
document.getElementById('cropHeight').addEventListener('change', (event) => {
158+
cropHeight = parseInt(event.target.value) || 0;
159+
drawImage();
160+
});
161+
162+
img.onload = function() {
163+
drawImage();
164+
};
165+
166+
function drawImage() {
167+
ctx.clearRect(0, 0, canvas.width, canvas.height);
168+
if (crop) {
169+
// Draw a resizable rectangle for cropping
170+
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
171+
ctx.fillRect((canvas.width - cropWidth) / 2, (canvas.height - cropHeight) / 2, cropWidth, cropHeight);
172+
ctx.clearRect((canvas.width - cropWidth) / 2, (canvas.height - cropHeight) / 2, cropWidth, cropHeight);
173+
ctx.drawImage(img, (canvas.width - cropWidth) / 2, (canvas.height - cropHeight) / 2, cropWidth, cropHeight,
174+
(canvas.width - cropWidth) / 2, (canvas.height - cropHeight) / 2, cropWidth, cropHeight);
175+
} else {
176+
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
177+
}
178+
}
179+
});
180+
</script>
181+
182+
</body>
183+
</html>

0 commit comments

Comments
 (0)