Commit 578d9132 authored by Matija Obreza's avatar Matija Obreza
Browse files

Filter by kernel

parent 686f9546
import * as React from 'react';
import { withStyles } from '@material-ui/core/styles';
import { count } from '@gringlobal/counter/counter';
import { logElapsed, filterBlur, filterBW, filterSobel, filterSum } from '@gringlobal/counter/filters';
import { logElapsed, filterSobel, filterBlur, filterSum, filterSharpenWithMask, filterOutline } from '@gringlobal/counter/filters';
const styles = {
canvases: {
......@@ -20,15 +20,15 @@ const styles = {
original: {
width: '100%',
position: 'relative' as 'relative',
visibility: 'hidden' as 'hidden',
// visibility: 'hidden' as 'hidden',
},
resultOverlay: {
width: '100%',
minHeight: '20px',
position: 'absolute' as 'absolute',
border: 'solid 1px red',
top: 20, // -1,
left: 20, // -1,
top: -1,
left: -1,
},
canvas: {
maxHeight: '200px',
......@@ -89,17 +89,23 @@ class ProcessImage extends React.Component<any> {
// const filtered = filterThinEdges(filterSum(filterSobel(filterSmooth(image))));
// let filtered = filterBW(image);
// startTime = logElapsed(startTime, 'filterBw');
let filtered = filterBlur(image);
startTime = logElapsed(startTime, 'filterBlur');
// let filtered = filterSharpenWithMask(image);
// startTime = logElapsed(startTime, 'filterSharpen');
// filtered = colorClassifier(filtered, 16);
// startTime = logElapsed(startTime, 'colorClassifier');
let filtered = filterBlur(image);
startTime = logElapsed(startTime, 'filterBlur');
filtered = filterSobel(filtered);
startTime = logElapsed(startTime, 'filterSobel');
filtered = filterSum(filtered);
startTime = logElapsed(startTime, 'filterSum');
filtered = filterBW(filtered);
startTime = logElapsed(startTime, 'filterBW');
// filtered = filterThreshold(filtered, 1);
filtered = filterSharpenWithMask(filtered, 2);
startTime = logElapsed(startTime, 'filterSharpenWithMask');
filtered = filterOutline(filtered);
startTime = logElapsed(startTime, 'filterOutline');
// filtered = filterBW(filtered);
// startTime = logElapsed(startTime, 'filterBW');
// filtered = filterThreshold(filtered, 50);
// startTime = logElapsed(startTime, 'filterThreshold');
// filtered = filterThinEdges(filtered);
// startTime = logElapsed(startTime, 'filterThinEdges');
......
......@@ -985,3 +985,97 @@ export function colorClassifier(image, buckets: number = 16): ImageData {
return new ImageData(dataR, w, h);
}
/**
* Implementation of filtering by kernel
*
* @param image source image data
* @param kernel kernel matrix
*/
export function filterKernel(image: ImageData, kernel: number[][]) {
const w = image.width;
const h = image.height;
const data = image.data;
const dataR = new Uint8ClampedArray(data);
const P = (x, y) => (y * w + x) * 4;
for (let y = 1; y < h - 1; y++) {
for (let x = 1; x < w - 1; x++) {
applyKernelToPixel(data, dataR, x, y, P, kernel);
}
}
// for (let y = 0; y < h; y++) {
// for (let x = 0; x < w; x++) {
// const p = (y * w + x) * 4;
// dataR[p + 3] = ((dataR[p + 0] + dataR[p + 1] + dataR[p + 2]) > 0) ? 255 : 200;
// }
// }
return new ImageData(dataR, w, h);
}
const applyKernelToPixel = (data, dataR, x, y, P: (a,b) => number, kernel) => {
let nR = 0;
let nG = 0;
let nB = 0;
const p = P(x, y);
for (let i = -1; i <= 1; i++) {
for (let j = -1; j <= 1; j++) {
const pp = P(x + i, y + j);
nR += kernel[i + 1][j + 1] * (data[pp + 0]);
nG += kernel[i + 1][j + 1] * (data[pp + 1]);
nB += kernel[i + 1][j + 1] * (data[pp + 2]);
}
}
if (x === 3 && y === 3) {
console.log(`Sharpen ${x},${y} (${nR}, ${nG}, ${nB})`, p);
}
dataR[p + 0] = nR;
dataR[p + 1] = nG;
dataR[p + 2] = nB;
}
/**
* Based on https://en.wikipedia.org/wiki/Unsharp_masking
*
* @param image source Image data
* @param sharpenForce sharpen force
*/
export function filterSharpen(image: ImageData, sharpenForce: number = 1) {
const kernel = sharpenKernel(sharpenForce);
return filterKernel(image, kernel);
}
const sharpenKernel = (sharpenForce: number) =>
[
[0, -1 * sharpenForce, 0],
[-1 * sharpenForce, (4 * sharpenForce) + 1, -1 * sharpenForce],
[0, -1 * sharpenForce, 0]
];
export function filterSharpenWithMask(image: ImageData, sharpenForce: number = 0.5) {
const w = image.width;
const h = image.height;
const data = image.data;
const dataR = new Uint8ClampedArray(data);
const kernel = sharpenKernel(sharpenForce);
let mask = filterSobel(image);
mask = filterSum(mask);
mask = filterThinEdges(mask);
const maskData = mask.data;
const P = (x, y) => (y * w + x) * 4;
for (let y = 1; y < h - 1; y++) {
for (let x = 1; x < w - 1; x++) {
const p = P(x, y);
if (maskData[p + 0] > 0) {
applyKernelToPixel(data, dataR, x, y, P, kernel);
} else {
// dataR[p + 3] = 0;
}
}
}
return new ImageData(dataR, w, h);
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment