Looking at 10 image filters in fabric.js
Some filters like sepia, vintage and more with fabric.js and canvas
What is fabric.js?
Fabric.js is a really cool image processing toolkit that I use for my Photoveda product. It creates an abstraction above the HTML5 canvas element to do advanced stuff without having to deal with the low level canvas methods which are a pain.
No need to use getContext2d() or run through hoops to draw simple shapes. It is also free and open source.
What is HTML5 canvas?
The canvas element made a widely used tool like canva possible. I draw my Twitter and Linkedin banner with it. I created logo with it.
Canvas element totally took the browser’s ability to handle images to a massive step forward. In order to harness the raw power of canvas we can use webGL backend or the native one supported by fabric.js.
There is either texture manipulation or you can use the default method. I can do both with my browser.
Some filters
We are specifically looking at these filters for our demo.
Kodachrome
Sepia
Greyscale
Contrast
Brightness
Brownie
Vintage
Technicolor
Gamma
Saturation
Huerotate
Vibrance
Emboss
Resize
BlendColor
RemoveColor
Blur
Sharpen
Some of these filters take parameters and our code has hard coded some values, you can obviously play with it as I am giving you the source.
Code samples and demonstration
fabric-filters.html
<!DOCTYPE html>
<html>
<head>
<title>Fabric.js filters</title>
<script src= "fabric.min.js">
</script>
</head>
<body>
<h1>Fabric.js filters</h1>
<canvas id="orig"></canvas>
<hr/>
Choose a filter<br>
<select onChange="applyFilter()" id="filt" size="6" >
<option>Kodachrome </option>
<option>Sepia </option>
<option>Greyscale </option>
<option>Contrast</option>
<option>Brightness</option>
<option>Brownie</option>
<option>Vintage</option>
<option>Technicolor</option>
<option>Gamma</option>
<option>Saturation</option>
<option>Huerotate</option>
<option>Vibrance</option>
<option>Emboss</option>
<option>Resize</option>
<option>BlendColor</option>
<option>RemoveColor</option>
<option>Blur</option>
<option>Sharpen</option>
</select>
<canvas id="c"></canvas>
<script>
var canvas = new fabric.Canvas('c');
var orig = new fabric.Canvas('orig');
var ImageToFilter = null;
function addImage(url) {
fabric.Image.fromURL(url, function(img) {
img.selectable = false;
canvas.setWidth(img.width);
canvas.setHeight(img.height);
canvas.centerObject(img);
console.log(img);
canvas.add(img);
ImageToFilter = img;
//applyFilter('kodachrome');
orig.add(img);
orig.setWidth(img.width);
orig.setHeight(img.height);
orig.renderAll();
applyFilter('sepia');
}, {
crossOrigin: 'anonymous'
});
}
addImage('https://source.unsplash.com/500x300');
var filters = ['grayscale', 'invert', 'remove-color', 'sepia', 'brownie',
'brightness', 'contrast', 'saturation', 'vibrance', 'noise', 'vintage',
'pixelate', 'blur', 'sharpen', 'emboss', 'technicolor',
'polaroid', 'blend-color', 'gamma', 'kodachrome',
'blackwhite', 'blend-image', 'hue', 'resize'
];
function applyFilter() {
filt = document.getElementById('filt').value;
console.log(filt);
ImageToFilter.filters.pop();
switch (filt.toLowerCase()) {
case 'kodachrome':
/* Kodachrome effect */
var kd = new fabric.Image.filters.Kodachrome();
ImageToFilter.filters.push(kd);
console.log("Applying kodachrome filter");
break;
case 'contrast':
/* Contrast filter */
var contrast = new fabric.Image.filters.Contrast({
contrast: 0.3
});
ImageToFilter.filters.push(contrast);
console.log("Applying contrast filter");
break;
case 'brightness':
/* Brightness filter */
var brightness = new fabric.Image.filters.Brightness({
brightness: 0.8
});
ImageToFilter.filters.push(brightness);
console.log("Applying brightness filter");
break;
case 'greyscale':
/* Greyscale */
var gs = new fabric.Image.filters.Grayscale();
ImageToFilter.filters.push(gs);
console.log("Applying greyscale filter");
break;
case 'brownie':
/* Brownie */
var br = new fabric.Image.filters.Brownie();
ImageToFilter.filters.push(br);
console.log("Applying brownie filter");
break;
case 'vintage':
/* Vintage */
var vn = new fabric.Image.filters.Vintage();
ImageToFilter.filters.push(vn);
console.log("Applying vintage filter");
break;
case 'technicolor':
var tc = new fabric.Image.filters.Technicolor();
ImageToFilter.filters.push(tc);
console.log("Applying technicolor filter");
break;
case 'pixelate':
var px = new fabric.Image.filters.Pixelate();
ImageToFilter.filters.push(px);
console.log("Applying pixelate filter");
break;
case 'blur':
/* Blur */
var blr = new fabric.Image.filters.Blur({
blur: 0.2
});
ImageToFilter.filters.push(blr);
console.log("Applying blur filter");
break;
case 'sharpen':
/* Sharpen */
var sharpen = new fabric.Image.filters.Convolute({
matrix: [0, -1, 0,
-1, 5, -1,
0, -1, 0
]
});
ImageToFilter.filters.push(sharpen);
console.log("Applying sharpen filter");
break;
case 'emboss':
/* Emboss */
var emb = new fabric.Image.filters.Convolute({
matrix: [1, 1, 1,
1, 0.7, -1,
-1, -1, -1
]
});
ImageToFilter.filters.push(emb);
console.log("Applying emboss filter");
break;
case 'removecolor':
/* Remove color */
var rm = new fabric.Image.filters.RemoveColor({
threshold: 0.2,
distance: 0.5
});
ImageToFilter.filters.push(rm);
console.log("Applying removecolor filter");
break;
case 'vibrance':
/* Vibrance filter */
var vb = new fabric.Image.filters.Vibrance({
vibrance: 1
});
ImageToFilter.filters.push(vb);
console.log("Applying vibrance filter");
break;
case 'blendcolor':
/* Blend color */
var blcol = new fabric.Image.filters.BlendColor({
color: '#00ff00',
mode: 'multiply'
});
ImageToFilter.filters.push(blcol);
console.log("Applying blendcolor filter");
break;
case 'huerotate':
/* Hue rotate */
var huerot = new fabric.Image.filters.HueRotation({
rotation: 0.5
});
ImageToFilter.filters.push(huerot);
console.log("Applying huerotate filter");
break;
case 'resize':
var resz = new fabric.Image.filters.Resize();
ImageToFilter.filters.push(resz);
console.log("Applying resize filter");
break;
case 'sepia':
var sp = new fabric.Image.filters.Sepia();
ImageToFilter.filters.push(sp);
console.log("Applying sepia filter");
break;
case 'saturation':
/* Saturation */
var sat = new fabric.Image.filters.Saturation({
saturation: 0.7
});
ImageToFilter.filters.push(sat);
console.log("Applying saturation filter");
break;
case 'gamma':
/* Gamma filter */
var gamma = new fabric.Image.filters.Gamma({
gamma: [1, 0.5, 2.1]
});
ImageToFilter.filters.push(gamma);
console.log("Applying gamma filter");
break;
}
ImageToFilter.applyFilters();
canvas.renderAll();
}
</script>
</body>
</html>
Conclusion
As you can see, an ability to write source code can work wonders and do things that people think of as magic.
Image processing is a really nice field which has driven a lot of passion in me to stick to it long enough to start making my first millions by selling this as a SaaS.
Answer
How does voice synthesis work?
It uses recorded speech to construct a concatenated feed of words to make sentences from written text. The idea of constructing artificial speech has existed from 1950s.
There used to be devices to do them in eletronics but nowadays you have even browsers that come built in with such capability. I myself have an open source project to demonstrate this.
Question
What is positioning in marketing?
Feedback
In order to create a healthy revenue stream for you, unless you are a scammer and want to see your reputation go awry online you want delighted customers that do your word of mouth to spread your brand online.
In order to get there you must create software that is very high quality. This is often a different way of saying that you should be a really good programmer and be willing to bring out your best.