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+ } ;
0 commit comments