it('should have 99.8% of pixels black after applying a 9x9 kernel and edge detection', async () => {
const image = await Imgstry.loadImage(IMAGE_SOURCE);
processor.drawImage(image);
await render(
processor
.convolve(GaussianBlur(9, 100))
.convolve(EdgeDetection()),
method,
);
let channelSum = 0;
let pixelData = processor.imageData.data;
for (let i = 0; i < pixelData.length; i += 4) {
let rgb = {
r: pixelData[i],
g: pixelData[i + 1],
b: pixelData[i + 2],
a: pixelData[i + 3],
};
channelSum += (rgb.r + rgb.b + rgb.g) / 3;
}
expect(channelSum / pixelData.length)
.approximately(0, .2);
});
it('should serialize canvas data png data uri', async () => {
const image = await Imgstry.loadImage(IMAGE_SOURCE);
processor.drawImage(image);
const dataUri = processor.toDataUrl();
const dataUriRegex = /^(data:)([\w\/\+]+);(charset=[\w-]+|base64).*,(.*)/gi;
expect(dataUri).to.match(dataUriRegex);
});
it('should have the same value on all channels', async () => {
await render(
processor.brightness(50)
.tint('#16a085')
.blackAndWhite(),
method,
);
let pixelData = processor.imageData.data;
let channelSum = true;
for (let i = 0; i < pixelData.length; i += 4) {
let rgb = {
r: pixelData[i],
g: pixelData[i + 1],
b: pixelData[i + 2],
};
channelSum = channelSum &&
rgb.r ===
rgb.b &&
rgb.b ===
rgb.g &&
rgb.r !== 0;
}
expect(channelSum).equal(true);
});
beforeEach(function () {
test = this.currentTest;
test.timeout(10000);
board = Imgstry.getCanvas(anchor);
processor = new Imgstry(board, {
thread: {
isDebugEnabled: true,
},
});
});
it('should set original image state', async () => {
const image = await Imgstry.loadImage(IMAGE_SOURCE);
processor.drawImage(image);
const original = processor.clone(processor.imageData);
processor
.contrast(100)
.renderSync();
processor.reset();
expect(processor.imageData.width).to.equal(original.width);
expect(processor.imageData.height).to.equal(original.height);
processor.imageData.data.forEach((value, idx) => {
expect(value).to.equal(original.data[idx]);
});
});
it('should render multiple without locking the image buffer', async () => {
const image = await Imgstry.loadImage(IMAGE_SOURCE);
processor.drawImage(image);
await render(
processor
.brightness(20),
method,
);
await wait(251);
await render(
processor
.contrast(10),
method,
);
await wait(251);
await render(
processor
.contrast(35),
method,
);
await wait(251);
await render(
processor
.contrast(200),
method,
);
});
it('should have 98.% percent of pixels black after detection', async () => {
const image = await Imgstry.loadImage(IMAGE_SOURCE);
processor
.drawImage(image);
let pixelData = processor.imageData.data;
let initialAlpha = 0;
for (let i = 0; i < pixelData.length; i += 4) {
initialAlpha += pixelData[i + 3];
}
await render(
processor
.convolve(EdgeDetection()),
method,
);
pixelData = processor.imageData.data;
let channelSum = 0;
let alpha = 0;
for (let i = 0; i < pixelData.length; i += 4) {
let rgb = {
r: pixelData[i],
g: pixelData[i + 1],
b: pixelData[i + 2],
a: pixelData[i + 3],
};
alpha += rgb.a;
channelSum += (rgb.r + rgb.b + rgb.g) / 3;
}
expect(channelSum / pixelData.length)
.approximately(0, 1.51);
expect(alpha).equal(initialAlpha, 'the alpha channel was mutated by the convolution');
});
it(`should have spikes for ${hex.name}`, async () => {
const rgb = new Hex(hex.color).toRgb();
const mean = Math.floor((rgb.r + rgb.g + rgb.b) / 3);
await render(
processor
.fill(hex.color),
method,
);
const result = processor.histogram;
expect(result.all[mean]).approximately(1, 1e-7);
expect(result.channel.red[rgb.r]).approximately(1, 1e-7);
expect(result.channel.green[rgb.g]).approximately(1, 1e-7);
expect(result.channel.blue[rgb.b]).approximately(1, 1e-7);
});
it('should have sum of channel color distribution equal to 1', async () => {
await render(
processor
.brightness(15)
.noise(25)
.tint('#16a085'),
method,
);
const result = processor.histogram;
const sum = (arr: number[]) =>
arr.reduce((a: number, b: number) => a + b, 0);
expect(sum(result.all)).approximately(1, 1e-7);
expect(sum(result.channel.red)).approximately(1, 1e-7);
expect(sum(result.channel.green)).approximately(1, 1e-7);
expect(sum(result.channel.blue)).approximately(1, 1e-7);
});
it('should have all pixels neutral gray if brigthness is set to 50', async () => {
await render(
processor
.brightness(50),
method,
);
let pixelData = processor.imageData.data;
let channelSum = 0;
for (let i = 0; i < pixelData.length; i += 4) {
let rgb = {
r: pixelData[i],
g: pixelData[i + 1],
b: pixelData[i + 2],
};
channelSum += (rgb.r + rgb.b + rgb.g) / 3;
}
expect(channelSum / pixelData.length * 4).oneOf([127, 128]);
});
