When I took on the project, I thought that filters like black and white/sepia are very difficult to make, through photo processing. Everything is simpler!
Below I will give an interesting algorithm for decomposing an image into pixel spectra and processing photos.
<h1>Filter Fun</h1>
<script src="https://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js"> </script>
<canvas id="can"></canvas>
<p> <b>
Load Image: <input type="file" multiple="false" accept="image/*" id="file" onchange="loadImage()">
</b> </p>
<input type="button" id="button" value="Grayscale" onclick="doGray()">
<input type="button" id="button" value="Red" onclick="doRed()">
<input type="button" id="button" value="Rainbow" onclick="doRainbow()">
<p>
<input type="button" id="button" value="Reset image" onclick="Reset()">
</p>
I'm hinting at something like this (naturally, any file):
It is better to align even the simplest design. You will get the hang of big projects faster.
h1 {
font-size: 22pt;
font-family: Arial;
color: #008B8B;
}
body {
background-color: #F5F5DC;
}
p {
font-size: 16pt;
}
canvas {
width: 400px;
background-color: #ADD8E6;
border: 2px solid #A9A9A9;
}
input {
font-size: 12pt;
}
The essence of the algorithm is as follows:
- Any image on the Internet is decomposed into a spectrum: Red, Green, Blue
- Create 3 arrays that store the number of pixels of the corresponding color in the image (detailed function in the code)
- When selecting a filter: sequentially process 3 arrays to add/reduce the color palette value
var imgFile;
var image = null;
var imageGray = null;
var imageRed = null;
var imageRainbow = null;
var canvas = null;
function loadImage(){
canvas = document.getElementById("can");
imgFile = document.getElementById("file");
image = new SimpleImage(imgFile);
imageGray = new SimpleImage(imgFile);
imageRed = new SimpleImage(imgFile);
imageRainbow = new SimpleImage(imgFile);
image.drawTo(canvas);
}
function imageIsLoaded(img) {
if (img==null || !img.complete()) {
alert("Image not loaded");
return false;
}
else {
return true;
}
}
function doGray(){
if (imageIsLoaded(image)) {
for (var pixel of imageGray.values()) {
var arg = (pixel.getRed() + pixel.getGreen() + pixel.getBlue())/3;
pixel.setRed(arg);
pixel.setGreen(arg);
pixel.setBlue(arg);
}
imageGray.drawTo(canvas);
}
}
function doRed(){
if (imageIsLoaded(image)) {
for (var pixel of imageRed.values()) {
var arg = (pixel.getRed() + pixel.getGreen() + pixel.getBlue())/3;
if (arg < 128) {
pixel.setRed(arg*2);
pixel.setGreen(0);
pixel.setBlue(0);
}
else {
pixel.setRed(255);
pixel.setGreen(arg*2-255);
pixel.setBlue(arg*2-255);
}
}
imageRed.drawTo(canvas);
}
}
function doRainbow(){
if (imageIsLoaded(image)) {
imageRainbow.drawTo(canvas);
}
}
function Reset(){
image = new SimpleImage(imgFile);
imageGray = new SimpleImage(imgFile);
imageRed = new SimpleImage(imgFile);
imageRainbow = new SimpleImage(imgFile);
image.drawTo(canvas);
}
It seems to be a simple algorithm, but it helps to understand the image pixels and processing according to the color palette. I think it deserves your attention!
SOCIAL SHARE CARD GENERATOR