feat: add core operations

2026-08-23 11:38:18 +05:00
parent 7fa2c52bb8
commit f9a4973b47
6 changed files with 368 additions and 6 deletions
@@ -1,7 +1,56 @@
 import { describe, expect, it } from 'vitest';
-import { colorMask, flattenOntoColor, invertAlpha, parseHex, removeColorToAlpha } from './alpha';
+import {
+	colorMask,
+	extractAlphaMask,
+	flattenOntoColor,
+	invertAlpha,
+	parseHex,
+	removeColorToAlpha,
+	roundCorners,
+	setAlphaChannel
+} from './alpha';
 import { makeImage } from './test-helpers';

+describe('setAlphaChannel', () => {
+	it('задаёт константную альфу', () => {
+		const out = setAlphaChannel(makeImage(2, 1, [
+			[1, 2, 3, 255],
+			[4, 5, 6, 0]
+		]), 50);
+		expect(out.data[3]).toBe(128);
+		expect(out.data[7]).toBe(128);
+		expect(out.data[0]).toBe(1);
+	});
+});
+
+describe('extractAlphaMask', () => {
+	it('переводит альфу в чёрно-белую непрозрачную маску', () => {
+		const out = extractAlphaMask(makeImage(2, 1, [
+			[10, 20, 30, 255],
+			[40, 50, 60, 0]
+		]));
+		expect([...out.data]).toEqual([
+			255, 255, 255, 255,
+			0, 0, 0, 255
+		]);
+	});
+});
+
+describe('roundCorners', () => {
+	it('срезает углы, центр и середины сторон остаются', () => {
+		const img = makeImage(11, 11, new Array(121).fill([100, 100, 100, 255]));
+		const out = roundCorners(img, 40);
+		expect(out.data[(0 * 11 + 0) * 4 + 3]).toBe(0);
+		expect(out.data[(5 * 11 + 5) * 4 + 3]).toBe(255);
+		expect(out.data[(5 * 11 + 0) * 4 + 3]).toBe(255);
+	});
+
+	it('нулевой радиус ничего не меняет', () => {
+		const img = makeImage(2, 2, new Array(4).fill([1, 2, 3, 255]));
+		expect([...roundCorners(img, 0).data]).toEqual([...img.data]);
+	});
+});
+
 describe('invertAlpha', () => {
 	it('обращает альфу, RGB не трогает', () => {
 		const out = invertAlpha(makeImage(1, 1, [[10, 20, 30, 128]]));
@@ -22,6 +22,46 @@ export function removeColorToAlpha(
 	return out;
 }

+export function setAlphaChannel(img: PixelImage, percent: number): PixelImage {
+	const alpha = Math.round((clamp(percent, 0, 100) / 100) * 255);
+	const out: PixelImage = { width: img.width, height: img.height, data: img.data.slice() };
+	for (let i = 3; i < out.data.length; i += 4) {
+		out.data[i] = alpha;
+	}
+	return out;
+}
+
+export function extractAlphaMask(img: PixelImage): PixelImage {
+	const out = createPixelImage(img.width, img.height);
+	for (let i = 0; i < out.data.length; i += 4) {
+		const v = img.data[i + 3];
+		out.data[i] = v;
+		out.data[i + 1] = v;
+		out.data[i + 2] = v;
+		out.data[i + 3] = 255;
+	}
+	return out;
+}
+
+export function roundCorners(img: PixelImage, radiusPercent: number): PixelImage {
+	const radius = (clamp(radiusPercent, 0, 50) / 100) * (Math.min(img.width, img.height) / 2);
+	if (radius < 1) return { width: img.width, height: img.height, data: img.data.slice() };
+	const out: PixelImage = { width: img.width, height: img.height, data: img.data.slice() };
+	const r2 = radius * radius;
+	for (let y = 0; y < out.height; y++) {
+		for (let x = 0; x < out.width; x++) {
+			const cx = clamp(x, radius, out.width - 1 - radius);
+			const cy = clamp(y, radius, out.height - 1 - radius);
+			const dx = x - cx;
+			const dy = y - cy;
+			if (dx * dx + dy * dy > r2) {
+				out.data[(y * out.width + x) * 4 + 3] = 0;
+			}
+		}
+	}
+	return out;
+}
+
 export function invertAlpha(img: PixelImage): PixelImage {
 	const out = createPixelImage(img.width, img.height);
 	for (let i = 0; i < out.data.length; i += 4) {
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { crop, flip, resize, rotate90 } from './geometry';
+import { centerByAlpha, crop, expandCanvas, flip, resize, rotate90, tile } from './geometry';
 import { makeImage } from './test-helpers';

 const square = () =>
@@ -126,6 +126,64 @@ describe('crop', () => {
 	});
 });

+describe('expandCanvas', () => {
+	const pixel = () => makeImage(1, 1, [[10, 20, 30, 255]]);
+
+	it('прозрачное расширение кладёт пиксель со смещением', () => {
+		const out = expandCanvas(pixel(), 1, 2, 3, 4);
+		expect(out.width).toBe(5);
+		expect(out.height).toBe(7);
+		expect([...out.data.slice(0, 4)]).toEqual([0, 0, 0, 0]);
+		expect([...out.data.slice((2 * 5 + 1) * 4, (2 * 5 + 1) * 4 + 4)]).toEqual([10, 20, 30, 255]);
+	});
+
+	it('цветной фон заливает всё вокруг', () => {
+		const out = expandCanvas(pixel(), 1, 0, 0, 0, '#ffffff');
+		expect(out.data[0]).toBe(255);
+		expect(out.data[3]).toBe(255);
+		expect(out.data[(0 * 2 + 1) * 4 + 3]).toBe(255);
+	});
+});
+
+describe('tile', () => {
+	it('повторяет изображение по сетке', () => {
+		const out = tile(makeImage(1, 1, [[9, 9, 9, 255]]), 3, 2);
+		expect(out.width).toBe(3);
+		expect(out.height).toBe(2);
+		expect([...out.data].filter((_, i) => i % 4 === 0)).toEqual([9, 9, 9, 9, 9, 9]);
+	});
+});
+
+describe('centerByAlpha', () => {
+	it('вырезает непрозрачный блок и центрирует на прежнем холсте', () => {
+		const img = makeImage(3, 3, [
+			[0, 0, 0, 0],
+			[0, 0, 0, 0],
+			[0, 0, 0, 0],
+			[0, 0, 0, 0],
+			[5, 5, 5, 255],
+			[0, 0, 0, 0],
+			[0, 0, 0, 0],
+			[0, 0, 0, 0],
+			[0, 0, 0, 0]
+		]);
+		const out = centerByAlpha(img);
+		expect(out.width).toBe(3);
+		expect(out.height).toBe(3);
+		const alphaAt = (x: number, y: number) => out.data[(y * 3 + x) * 4 + 3];
+		expect(alphaAt(0, 0)).toBe(0);
+		expect(alphaAt(1, 1)).toBe(255);
+	});
+
+	it('полностью прозрачное изображение возвращается без изменений', () => {
+		const img = makeImage(2, 1, [
+			[0, 0, 0, 0],
+			[0, 0, 0, 0]
+		]);
+		expect([...centerByAlpha(img).data]).toEqual([...img.data]);
+	});
+});
+
 describe('resize', () => {
 	const twoByTwo = () =>
 		makeImage(2, 2, [
@@ -1,5 +1,85 @@
+import { parseHex } from './alpha';
 import { clonePixelImage, createPixelImage, type PixelImage } from './types';

+export function expandCanvas(
+	img: PixelImage,
+	left: number,
+	top: number,
+	right: number,
+	bottom: number,
+	backgroundHex?: string
+): PixelImage {
+	const l = Math.max(0, Math.trunc(left));
+	const t = Math.max(0, Math.trunc(top));
+	const r = Math.max(0, Math.trunc(right));
+	const b = Math.max(0, Math.trunc(bottom));
+	const out = createPixelImage(img.width + l + r, img.height + t + b);
+	if (backgroundHex !== undefined) {
+		const [cr, cg, cb] = parseHex(backgroundHex);
+		for (let i = 0; i < out.data.length; i += 4) {
+			out.data[i] = cr;
+			out.data[i + 1] = cg;
+			out.data[i + 2] = cb;
+			out.data[i + 3] = 255;
+		}
+	}
+	for (let y = 0; y < img.height; y++) {
+		const srcStart = y * img.width * 4;
+		out.data.set(
+			img.data.subarray(srcStart, srcStart + img.width * 4),
+			((y + t) * out.width + l) * 4
+		);
+	}
+	return out;
+}
+
+export function tile(img: PixelImage, columns: number, rows: number): PixelImage {
+	const cols = Math.max(1, Math.trunc(columns));
+	const rowsCount = Math.max(1, Math.trunc(rows));
+	const out = createPixelImage(img.width * cols, img.height * rowsCount);
+	for (let ty = 0; ty < rowsCount; ty++) {
+		for (let tx = 0; tx < cols; tx++) {
+			for (let y = 0; y < img.height; y++) {
+				const srcStart = y * img.width * 4;
+				out.data.set(
+					img.data.subarray(srcStart, srcStart + img.width * 4),
+					((ty * img.height + y) * out.width + tx * img.width) * 4
+				);
+			}
+		}
+	}
+	return out;
+}
+
+export function centerByAlpha(img: PixelImage): PixelImage {
+	let minX = img.width;
+	let minY = img.height;
+	let maxX = -1;
+	let maxY = -1;
+	for (let y = 0; y < img.height; y++) {
+		for (let x = 0; x < img.width; x++) {
+			if (img.data[(y * img.width + x) * 4 + 3] > 0) {
+				if (x < minX) minX = x;
+				if (y < minY) minY = y;
+				if (x > maxX) maxX = x;
+				if (y > maxY) maxY = y;
+			}
+		}
+	}
+	if (maxX < 0) return clonePixelImage(img);
+	const content = crop(img, minX, minY, maxX - minX + 1, maxY - minY + 1);
+	const out = createPixelImage(img.width, img.height);
+	const dx = Math.floor((img.width - content.width) / 2);
+	const dy = Math.floor((img.height - content.height) / 2);
+	for (let y = 0; y < content.height; y++) {
+		out.data.set(
+			content.data.subarray(y * content.width * 4, (y + 1) * content.width * 4),
+			((y + dy) * out.width + dx) * 4
+		);
+	}
+	return out;
+}
+
 export type FlipAxis = 'horizontal' | 'vertical';

 export function flip(img: PixelImage, axis: FlipAxis): PixelImage {