yes this is a reup i'm sorry i'm learning
tigerlily.cafe
1const canvas = document.getElementById("canvas");
2const ctx = canvas.getContext("2d");
3const upload = document.getElementById("upload");
4let img = new Image();
5upload.addEventListener("change", (e) => {
6 const file = e.target.files[0];
7 const reader = new FileReader();
8 reader.onload = function(event) {
9 img.onload = function() {
10 ctx.globalCompositeOperation = "copy";
11 ctx.drawImage(ctx.canvas, 0, 0);
12 canvas.width = img.width;
13 canvas.height = img.height;
14 ctx.drawImage(img, 0, 0);
15 }
16 img.src = event.target.result;
17 }
18 reader.readAsDataURL(file);
19});
20
21function contrastImage(imageData, contrast) {
22 var data = imageData.data;
23 var factor = (259 * (contrast + 255)) / (255 * (259 - contrast));
24 for(var i = 0; i < data.length; i += 4) {
25 data[i] = factor * (data[i] - 128) + 128;
26 data[i + 1] = factor * (data[i + 1] - 128) + 128;
27 data[i + 2] = factor * (data[i + 2] - 128) + 128;
28 }
29 return imageData;
30}
31
32function randomRGB() {
33 let r = Math.random();
34 let g = Math.random();
35 let b = Math.random();
36 const sum = r + g + b;
37 r /= sum;
38 g /= sum;
39 b /= sum;
40 return [r, g, b];
41}
42
43function applyOhNo() {
44 const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
45 const data = imageData.data;
46 const [r1, g1, b1] = randomRGB();
47 const [r2, g2, b2] = randomRGB();
48 const [r3, g3, b3] = randomRGB();
49 for(let i = 0; i < data.length; i += 4) {
50 let r = data[i];
51 let g = data[i + 1];
52 let b = data[i + 2];
53 data[i] = Math.min(Math.round(r1 * r + g1 * g + b1 * b), 255);
54 data[i + 1] = Math.min(Math.round(r2 * r + g2 * g + b2 * b), 155);
55 data[i + 2] = Math.min(Math.round(r3 * r + g3 * g + b3 * b), 155);
56 }
57 var newImageData = contrastImage(imageData, 100);
58 ctx.putImageData(imageData, 0, 0);
59}
60
61function applyOhYes() {
62 const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
63 const data = imageData.data;
64 const [r1, g1, b1] = randomRGB();
65 const [r2, g2, b2] = randomRGB();
66 const [r3, g3, b3] = randomRGB();
67 for(let i = 0; i < data.length; i += 4) {
68 let r = data[i];
69 let g = data[i + 1];
70 let b = data[i + 2];
71 data[i] = Math.min(Math.round(r1 * r + g1 * g + b1 * b), 255);
72 data[i + 1] = Math.min(Math.round(r2 * r + g2 * g + b2 * b), 55);
73 data[i + 2] = Math.min(Math.round(r3 * r + g3 * g + b3 * b), 55);
74 }
75 var newImageData = contrastImage(imageData, 100);
76 ctx.putImageData(imageData, 0, 0);
77}
78
79function applyActualMitziMode() {
80 const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
81 const data = imageData.data;
82 const [r1, g1, b1] = randomRGB();
83 const [r2, g2, b2] = randomRGB();
84 const [r3, g3, b3] = randomRGB();
85 for(let i = 0; i < data.length; i += 4) {
86 let r = data[i];
87 let g = data[i + 1];
88 let b = data[i + 2];
89 data[i] = Math.min(Math.round(r1 * r + g1 * g + b1 * b), 255);
90 data[i + 1] = Math.min(Math.round(r2 * r + g2 * g + b2 * b), 2);
91 data[i + 2] = Math.min(Math.round(r3 * r + g3 * g + b3 * b), 2);
92 }
93 var newImageData = contrastImage(imageData, 100);
94 ctx.putImageData(imageData, 0, 0);
95}
96
97function applyBruh() {
98 const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
99 const data = imageData.data;
100 const [r1, g1, b1] = randomRGB();
101 const [r2, g2, b2] = randomRGB();
102 const [r3, g3, b3] = randomRGB();
103 for(let i = 0; i < data.length; i += 4) {
104 let r = data[i];
105 let g = data[i + 1];
106 let b = data[i + 2];
107 data[i] = Math.min(Math.round(r1 * r + g1 * g + b1 * b), 225);
108 data[i + 1] = Math.min(Math.round(r2 * r + g2 * g + b2 * b), 185);
109 data[i + 2] = Math.min(Math.round(r3 * r + g3 * g + b3 * b), 105);
110 }
111 var newImageData = contrastImage(imageData, 100);
112 ctx.putImageData(imageData, 0, 0);
113}
114
115function applyCute() {
116 const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
117 const data = imageData.data;
118 const [r1, g1, b1] = randomRGB();
119 const [r2, g2, b2] = randomRGB();
120 const [r3, g3, b3] = randomRGB();
121 for(let i = 0; i < data.length; i += 4) {
122 let r = data[i];
123 let g = data[i + 1];
124 let b = data[i + 2];
125 data[i] = Math.min(Math.round(r1 * r + g1 * g + b1 * b), 225);
126 data[i + 1] = Math.min(Math.round(r2 * r + g2 * g + b2 * b), 95);
127 data[i + 2] = Math.min(Math.round(r3 * r + g3 * g + b3 * b), 155);
128 }
129 var newImageData = contrastImage(imageData, 100);
130 ctx.putImageData(imageData, 0, 0);
131}
132
133function randomRGB() {
134 let r = Math.random();
135 let g = Math.random();
136 let b = Math.random();
137 const sum = r + g + b;
138 r /= sum;
139 g /= sum;
140 b /= sum;
141 return [r, g, b];
142}
143
144function applyRNG() {
145 const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
146 const data = imageData.data;
147 const [r1, g1, b1] = randomRGB();
148 const [r2, g2, b2] = randomRGB();
149 const [r3, g3, b3] = randomRGB();
150 for(let i = 0; i < data.length; i += 4) {
151 let r = data[i];
152 let g = data[i + 1];
153 let b = data[i + 2];
154 data[i] = Math.min(Math.round(r1 * r + g1 * g + b1 * b), 255);
155 data[i + 1] = Math.min(Math.round(r2 * r + g2 * g + b2 * b), 255);
156 data[i + 2] = Math.min(Math.round(r3 * r + g3 * g + b3 * b), 255);
157 }
158 var newImageData = contrastImage(imageData, 100);
159 ctx.putImageData(imageData, 0, 0);
160}
161
162function applyNoise() {
163 const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
164 const data = imageData.data;
165 for(let i = 0; i < data.length; i += 4) {
166 let r = data[i], // red
167 g = data[i + 1], // green
168 b = data[i + 2]; // blue
169 data[i] = Math.min(Math.round(0.572 * r + 0.134 * g + 0.131 * b), Math.random() * 255);
170 data[i + 1] = Math.min(Math.round(0.172 * r + 0.534 * g + 0.131 * b), 155);
171 data[i + 2] = Math.min(Math.round(0.272 * r + 0.134 * g + 0.531 * b), 155);
172 }
173 ctx.putImageData(imageData, 0, 0);
174}
175const BlastBtn = document.getElementById('BlastBtn');
176BlastBtn.addEventListener('click', () => {
177 ctx.filter = "saturate(200%)";
178 ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
179});
180const resetBtn = document.getElementById('resetBtn');
181resetBtn.addEventListener('click', () => {
182 ctx.filter = "saturate(100%)";
183 ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
184});
185// fill the canvas using the pattern
186function draw() {
187 ctx.clearRect(0, 0, viewWidth, viewHeight);
188 ctx.fillStyle = ctx.createPattern(patternCanvas, 'repeat');
189 ctx.fillRect(0, 0, viewWidth, viewHeight);
190}
191
192function downloadImage() {
193 const link = document.createElement("a");
194 link.download = "edited-photo.png";
195 link.href = canvas.toDataURL("image/png");
196 link.click();
197}