sobel-ts
Version:
TypeScript implementation of Sobel edge detection algorithm for image processing
58 lines (57 loc) • 2.21 kB
TypeScript
import { ImageDataLike, KernelSize, OutputFormat } from './types.js';
/**
* Converts ImageData to grayscale, applies Sobel kernels, returns new ImageData
*
* This class performs edge detection using the Sobel operator.
* It processes a given ImageData object to extract horizontal and vertical gradients,
* then outputs a new ImageData with edge intensities encoded as grayscale values.
*
* This is a TypeScript implementation with enhancements including:
* - Variable kernel sizes (3x3, 5x5)
* - Multiple output formats (magnitude, x, y, direction)
*
* Current Maintainer/Developer: @catorch
*
* This work builds upon the original JavaScript version by Miguel Mota
* (https://github.com/miguelmota/sobel, MIT License).
*
*/
export declare class Sobel {
private imageData;
private width;
private height;
private grayscaleData;
private static imageDataFactory;
private kernelSize;
private static kernelX3;
private static kernelY3;
private static kernelX5;
private static kernelY5;
/**
* Constructor stores image dimensions, kernel size, and computes grayscale version
* @param imageData - original image data (browser ImageData or Node.js buffer)
* @param kernelSize - size of the Sobel kernel (3 or 5, defaults to 3)
*/
constructor(imageData: ImageDataLike, kernelSize?: KernelSize);
/**
* Safely retrieves the value of a specific pixel channel in an image array
* @param data - image pixel array
* @param x - horizontal coordinate
* @param y - vertical coordinate
* @param channel - 0=R, 1=G, 2=B, 3=A (default 0)
* @returns pixel channel value (0 if out of bounds)
*/
private pixelAt;
/**
* Converts RGBA input to grayscale (preserves alpha as 255)
* @param imageData - original image data
* @returns new Uint8ClampedArray of grayscale RGBA pixels
*/
private convertToGrayscale;
/**
* Applies Sobel filter using the specified kernel size and output format
* @param format - Output format ('magnitude', 'x', 'y', or 'direction')
* @returns ImageData with edge intensities
*/
apply(format?: OutputFormat): ImageDataLike;
}