图像处理的实现与应用（TypeScript 版）
图像处理是现代技术中的重要应用之一，广泛用于图像分析、计算机视觉和人工智能。本文使用 TypeScript 编写一些图像处理的基本操作，包括灰度转换、去除边框、提取有效区域和图像分割等。这些操作基于 HTML5 Canvas，实现起来直观且高效。
环境准备
首先确保你有基础的 TypeScript 项目，项目中需要一个 HTML 文件和一个 TypeScript 文件。HTML 文件中的 Canvas 元素将用于显示图像：
html
加载图像
首先在 Canvas 中加载图像：
typescript
const canvas = document.getElementById('imageCanvas') as HTMLCanvasElement;
const ctx = canvas.getContext('2d')!;
function loadImage(src: string): Promise
return new Promise((resolve, reject) => {
const img = new Image();
img.src = src;
img.onload = () => {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
resolve();
};
img.onerror = reject;
});
}
灰度转换
灰度转换是图像处理中最常用的操作之一。以下函数将图像转换为灰度：
typescript
function convertToGray(): void {
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
const gray = 0.3 * data[i] + 0.59 * data[i + 1] + 0.11 * data[i + 2];
data[i] = data[i + 1] = data[i + 2] = gray;
}
ctx.putImageData(imageData, 0, 0);
}
去除图像边框
去除边框可以将图像的边界部分设置为白色：
typescript
function clearBorders(borderWidth: number): void {
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
for (let y = 0; y < canvas.height; y++) {
for (let x = 0; x < canvas.width; x++) {
if (x < borderWidth || y < borderWidth || x >= canvas.width - borderWidth || y >= canvas.height - borderWidth) {
const index = (y * canvas.width + x) * 4;
data[index] = data[index + 1] = data[index + 2] = 255;
}
}
}
ctx.putImageData(imageData, 0, 0);
}
提取有效区域
提取有效区域是为了找到图像中的主要内容区域。以下代码遍历图像，找到所有像素值低于灰度阈值的区域：
typescript
function getValidRegion(threshold: number): ImageData {
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
let minX = canvas.width, minY = canvas.height, maxX = 0, maxY = 0;
for (let y = 0; y < canvas.height; y++) {
for (let x = 0; x < canvas.width; x++) {
const index = (y * canvas.width + x) * 4;
const gray = data[index];
if (gray < threshold) {
if (x < minX) minX = x;
if (y < minY) minY = y;
if (x > maxX) maxX = x;
if (y > maxY) maxY = y;
}
}
}
const width = maxX - minX + 1;
const height = maxY - minY + 1;
return ctx.getImageData(minX, minY, width, height);
}
图像分割
图像分割将图像按行列切分为多个小块。以下代码实现水平和垂直分割：
typescript
function splitImage(rows: number, cols: number): ImageData[] {
const width = canvas.width / cols;
const height = canvas.height / rows;
const images: ImageData[] = [];
for (let row = 0; row < rows; row++) {
for (let col = 0; col < cols; col++) {
const imageData = ctx.getImageData(col * width, row * height, width, height);
images.push(imageData);
}
}
return images;
}
生成二进制编码
生成二进制编码串，可以将图像中的灰度值转换为二进制表示：
typescript
function generateBinaryCode(threshold: number): string {
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
let binaryCode = '';
for (let i = 0; i < data.length; i += 4) {
binaryCode += data[i] < threshold ? '1' : '0';
}
return binaryCode;
}
