Skip to content

Commit 0780a76

Browse files
harshita2216harshita2216
authored
Merge pull request #243 from soma2000-lang/bulaw
Adding the photo--editor folder in the repo
2 parents 447dc24 + be1d9f4 commit 0780a76

File tree

10 files changed

+325
-0
lines changed

10 files changed

+325
-0
lines changed

‎Index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,3 +86,4 @@
8686
| [Restaurant website](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Restaurant-website) |A Restuarant website with a simple and user friendly design ad a database linked to it.|
8787
| [Speed-Distance-Time-Calculator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/speed-distance-time-calculator) |It is a multi pager Speed Distnace Time Calculator with simple but userfriendly design.|
8888
| [Simple Calculator (Flask)](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Simple%20Calculator%20(Flask))| A simple calculator with 2 input fields and some options to perform different operations on them.|
89+
| [Photo Editor](https://github.com/soma2000-lang/Web-dev-mini-projects/tree/bulaw/photo%20--%20editor) |It is a photo Editor which allows to rescale,flip and grey scale images.

‎photo -- editor/README.md

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<h1>Photo Editor</h1>
2+
3+
<p>An Awesome Photo editting written in HTML, CSS, JavaScript.</p>
4+
5+
### Use of the Project:
6+
7+
<p>It edits the images that is it it flips images horizontally and vertically resizes it and can also grey scale the image download option is also available here . </p>
8+
9+
<h3>Used Technologies</h3>
10+
<ul>
11+
<li>HTML5</li>
12+
<li>CSS3</li>
13+
<li>JavaScript</li>
14+
<li>php</li>
15+
16+
</ul>
17+
18+
#### Steps to Use:
19+
20+
---
21+
22+
- Download or clone the repository
23+
24+
```
25+
git clone https://github.com/soma2000-lang/Web-dev-mini-projects.git
26+
```
27+
28+
- Go to the directory
29+
- Run the index.html file by copying the file path and pasting it in your browser
30+
- Upload The Image
31+
- Download the Modifed Image by clicking On Save Button.
32+
- And Here you have Awesome Editted Image
33+
34+
<h3> ScreenShots </h3>
35+
<img width="960" alt="Photo-Editor" src="https://github.com/soma2000-lang/Photo-Editor/blob/master/WhatsApp%20Image%202021-07-17%20at%2023.15.55%20(1).jpeg">
36+
<img width="960" alt="Photo-Editor"src="https://github.com/soma2000-lang/Photo-Editor/blob/master/image%20(2)%20(1).png">
37+
<img width="960" alt="Photo-Editor" src="https://github.com/soma2000-lang/Photo-Editor/blob/master/image%20(3).png">
38+
39+
<br>
40+

‎photo -- editor/WhatsApp Image 2021-07-17 at 23.15.55 (1).jpeg

26.3 KB
Loading

‎photo -- editor/image (2) (1).png

66.2 KB
Loading

‎photo -- editor/image (3).png

23.6 KB
Loading

‎photo -- editor/image-editor.css

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
#imageEditor {
2+
margin: auto;
3+
padding: 20px;
4+
border: 1px solid #4b4b4b;
5+
-moz-border-radius: 8px;
6+
-webkit-border-radius: 8px;
7+
border-radius: 8px;
8+
background-color: hsl(133, 60%, 27%);
9+
}
10+
11+
#editorContainer {
12+
display: block;
13+
overflow: auto;
14+
width: 800px;
15+
height: 500px;
16+
}
17+
18+
#editor {
19+
display: block;
20+
margin: auto;
21+
}
22+
23+
#toolbar {
24+
display: block;
25+
margin-right: 50px;
26+
}
27+
28+
#resizer {
29+
border: 2px dashed #000
30+
}
31+
32+
#toolbar button {
33+
padding: 10px 20px 10px 20px;
34+
}

‎photo -- editor/index.html

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
9+
<link rel="stylesheet" href="style.css">
10+
<link rel="stylesheet" href="image-editor.css">
11+
<script src="script.js"></script>
12+
</head>
13+
14+
<body>
15+
<nav class="navbar navbar-light " style="font-size: 25px; font-family: sans-serif; background-color: whitesmoke;">
16+
17+
18+
Photo Editor
19+
</nav>
20+
<div id="container">
21+
<div class="text_box">
22+
<div id="imageEditor">
23+
<section id="editorContainer">
24+
<canvas id="editor"></canvas>
25+
</section>
26+
</div>
27+
<section id="toolbar">
28+
<button id="upload" class="btn btn-success" title="Upload">Upload</button>
29+
<button id="save" class="btn btn-danger" title="Save">Save</button>
30+
<br>
31+
<br>
32+
<button id="flipHor" class="btn btn-info" title="Flip Horizontally">Flip Horizontally</button>
33+
<button id="flipVert" class="btn btn-info" title="Flip vertically">Flip vertically</button>
34+
<br>
35+
<br>
36+
<button id="rotateL" class="btn btn-info" title="Rotate left">Rotate Left</button>
37+
<button id="rotateR" class="btn btn-info" title="Rotate right">Rotate Right</button>
38+
<br>
39+
<br>
40+
<button id="resize" class="btn btn-info" title="Resize">Resize</button>
41+
<button id="greyscale" class="btn btn-info" title="Convert to grayscale">Grayscale</button>
42+
</section>
43+
</div>
44+
</div>
45+
</body>
46+
47+
</html>

‎photo -- editor/index.php

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<?php include_once("index.html"); ?>

‎photo -- editor/script.js

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
2+
onload = function () {
3+
const editor = document.getElementById("editor");
4+
const context = editor.getContext("2d");
5+
const toolbar = document.getElementById("toolbar");
6+
7+
const tools = {
8+
"upload" : function () {
9+
const upload = document.createElement('input');
10+
upload.type = "file";
11+
upload.click();
12+
upload.onchange = function() {
13+
const img = new Image();
14+
img.onload = () => {
15+
editor.width = img.width;
16+
editor.height = img.height;
17+
context.drawImage(img, 0,0);
18+
};
19+
img.onerror = () => {
20+
console.error("The provided file couldn't be loaded as an Image media");
21+
};
22+
23+
img.src = URL.createObjectURL(this.files[0]);
24+
};
25+
},
26+
"save" : function(){
27+
const image = editor.toDataURL();
28+
const link = document.createElement('a');
29+
link.download = 'image.png';
30+
link.href = image;
31+
link.click();
32+
},
33+
"flipHor" : function(){
34+
let cols = editor.width; // Width is number of columns
35+
let rows = editor.height; // Height is number of rows
36+
let image = getRGBArray(rows, cols);
37+
38+
for(let i=0;i<Math.floor(rows/2);i++){
39+
for(let j=0;j<cols;j++){
40+
let tmp = image[i][j];
41+
image[i][j] = image[rows-1-i][j];
42+
image[rows-1-i][j] = tmp;
43+
}
44+
}
45+
setImageData(image, rows, cols);
46+
},
47+
"flipVert" : function(){
48+
let cols = editor.width; // Width is number of columns
49+
let rows = editor.height; // Height is number of rows
50+
let image = getRGBArray(rows, cols);
51+
52+
for(let i=0;i<rows;i++){
53+
for(let j=0;j<Math.floor(cols/2);j++){
54+
let tmp = image[i][j];
55+
image[i][j] = image[i][cols-1-j];
56+
image[i][cols-1-j] = tmp;
57+
}
58+
}
59+
setImageData(image, rows, cols);
60+
},
61+
"rotateL" : function () {
62+
let cols = editor.width; // Width is number of columns
63+
let rows = editor.height; // Height is number of rows
64+
let image = getRGBArray(rows, cols);
65+
66+
let limage = [];
67+
for(let i=cols-1;i>=0;i--){
68+
let row = [];
69+
for(let j=0;j<rows;j++){
70+
row.push(image[j][i]);
71+
}
72+
limage.push(row);
73+
}
74+
setImageData(limage, cols, rows);
75+
},
76+
"rotateR" : function () {
77+
let cols = editor.width; // Width is number of columns
78+
let rows = editor.height; // Height is number of rows
79+
let image = getRGBArray(rows, cols);
80+
81+
let rimage = [];
82+
for(let i=0;i<cols;i++){
83+
let row = [];
84+
for(let j=rows-1;j>=0;j--){
85+
row.push(image[j][i]);
86+
}
87+
rimage.push(row);
88+
}
89+
setImageData(rimage, cols, rows);
90+
},
91+
"resize" : function(){
92+
let cols = editor.width; // Width is number of columns
93+
let rows = editor.height; // Height is number of rows
94+
let image = getRGBArray(rows, cols);
95+
96+
let inp = prompt('Current Width : '+cols + '\n' + 'Current Height : '+rows + '\n' + 'Give the new width and height in a space separated manner').split(' ');
97+
if(inp.length!==2){
98+
alert('Incorrect dimensions in input');
99+
return;
100+
}
101+
let ncols = parseInt(inp[0]);
102+
let nrows = parseInt(inp[1]);
103+
if(isNaN(ncols) || isNaN(nrows)){
104+
alert('Input is not a proper number');
105+
return;
106+
}
107+
108+
let hratio = rows/nrows;
109+
let wratio = cols/ncols;
110+
111+
let nimage = [];
112+
for(let i=0;i<nrows;i++){
113+
let row = [];
114+
for(let j=0;j<ncols;j++){
115+
row.push(image[Math.floor(i*hratio)][Math.floor(j*wratio)]);
116+
}
117+
nimage.push(row);
118+
}
119+
setImageData(nimage, nrows, ncols);
120+
},
121+
"greyscale" : function(){
122+
let cols = editor.width; // Width is number of columns
123+
let rows = editor.height; // Height is number of rows
124+
let image = getRGBArray(rows, cols);
125+
126+
for(let i=0;i<rows;i++){
127+
for(let j=0;j<cols;j++){
128+
let pixel = image[i][j];
129+
let shade = Math.floor(0.3*pixel[0]+0.59*pixel[1]+0.11*pixel[2]);
130+
image[i][j][0] = image[i][j][1] = image[i][j][2] = shade;
131+
}
132+
}
133+
setImageData(image, rows, cols);
134+
}
135+
};
136+
137+
for(let button of toolbar.children){
138+
if(button.nodeName==="BUTTON") {
139+
button.onclick = function (event) {
140+
event.preventDefault();
141+
tools[this.id].call(this);
142+
}
143+
}
144+
}
145+
146+
function setImageData(data, rows, cols) {
147+
const Image = Array.from({ length: rows*cols*4 });
148+
for(let i = 0;i < rows; i++) {
149+
for (let j = 0; j < cols; j++) {
150+
for (let k = 0; k < 4; k++) {
151+
Image[( i*cols + j ) * 4 + k ] = data[i][j][k];
152+
}
153+
}
154+
}
155+
const idata = context.createImageData(cols, rows);
156+
idata.data.set(Image);
157+
editor.width = cols;
158+
editor.height = rows;
159+
context.putImageData(idata, 0, 0);
160+
}
161+
162+
function getRGBArray(rows, cols) {
163+
let data = context.getImageData(0, 0, cols, rows).data;
164+
const RGBImage = [];
165+
for(let i=0;i<rows;i++){
166+
let row = [];
167+
for(let j=0;j<cols;j++){
168+
let pixel = [];
169+
for(let k=0;k<4;k++){
170+
pixel.push( data[ ( i*cols + j ) * 4 + k ] );
171+
}
172+
row.push(pixel);
173+
}
174+
RGBImage.push(row);
175+
}
176+
return RGBImage;
177+
}
178+
};

‎photo -- editor/style.css

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
html,
2+
body {
3+
height: 100%;
4+
}
5+
6+
.text_box {
7+
margin-top: 50px;
8+
width: 100%;
9+
display: flex;
10+
flex-wrap: wrap;
11+
align-content: center;
12+
}
13+
14+
#container {
15+
width: 100%;
16+
background-color: rgb(140, 145, 118);
17+
display: flex;
18+
margin: 0 auto;
19+
}
20+
21+
.center_buttons {
22+
margin: auto;
23+
display: block;
24+
}

0 commit comments

Comments
 (0)