从图片到点阵：用JavaScript重现复古数码点阵艺术图

在数字图像的世界里，我们有时会痴迷于一种复古的美学------点阵图。从早期的打印机输出到LED广告牌，那种由无数小圆点构成的图像，散发着独特的科技感和艺术气息。今天，我们将一起探索如何使用现代Web技术（HTML5 Canvas和JavaScript），在浏览器中实现将普通图片实时转换为点阵图的效果。

一、效果展示与核心思路

最终效果：在网页上上传一张图片，它将立刻被转换成一个由许多小圆点组成的、具有黑白版画风格的图像。你可以通过调整参数来控制点阵的疏密和大小。

核心思路：

绘制原图：将用户上传的图片绘制到一个隐藏的Canvas上。
网格采样：将这个Canvas划分成均匀的网格。每个网格单元最终会对应点阵图中的一个"点"（或留白）。
计算灰度 ：对于每个网格单元，我们计算其内部所有像素的平均亮度（或称灰度值）。
阈值判定：根据一个预设的阈值，决定当前网格是"画点"还是"不画点"。如果该区域的平均亮度低于阈值（表示较暗），我们就画一个实心圆点；如果亮度较高，则留白。
绘制点阵：在另一个Canvas上，根据步骤4的判定结果，在对应的网格位置绘制圆点。

二、代码实现（附详细注释）

让我们直接看代码，这是理解整个过程最直观的方式。

HTML结构

创建一个简单的上传界面和两个Canvas：一个用于幕后处理原图，一个用于展示最终的点阵艺术。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片点阵化工具</title>
    <style>
        body {
            font-family: sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }
        .controls {
            margin-bottom: 20px;
        }
        #originalCanvas {
            display: none; /* 隐藏处理用的Canvas */
        }
        #dotMatrixCanvas {
            border: 1px solid #ccc;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>图片点阵化效果</h1>
    
    <div class="controls">
        <input type="file" id="imageUpload" accept="image/*">
        <br>
        <label>点大小: <input type="range" id="dotSizeSlider" min="2" max="20" value="6"></label>
        <span id="dotSizeValue">6</span>
        <br>
        <label>点间距: <input type="range" id="spacingSlider" min="5" max="50" value="15"></label>
        <span id="spacingValue">15</span>
        <br>
        <label>阈值 (值越小点越少): <input type="range" id="thresholdSlider" min="0" max="255" value="128"></label>
        <span id="thresholdValue">128</span>
    </div>

    <!-- 用于处理原始图像的Canvas，不显示 -->
    <canvas id="originalCanvas"></canvas>
    
    <!-- 用于显示点阵效果的Canvas -->
    <canvas id="dotMatrixCanvas"></canvas>

    <script src="script.js"></script>
</body>
</html>

JavaScript核心逻辑 (`script.js`)

这是实现点阵化效果的核心代码。

javascript 复制代码

// 获取DOM元素
const fileInput = document.getElementById('imageUpload');
const dotSizeSlider = document.getElementById('dotSizeSlider');
const spacingSlider = document.getElementById('spacingSlider');
const thresholdSlider = document.getElementById('thresholdSlider');
const dotSizeValue = document.getElementById('dotSizeValue');
const spacingValue = document.getElementById('spacingValue');
const thresholdValue = document.getElementById('thresholdValue');
const originalCanvas = document.getElementById('originalCanvas');
const dotMatrixCanvas = document.getElementById('dotMatrixCanvas');

const ctxOriginal = originalCanvas.getContext('2d');
const ctxDotMatrix = dotMatrixCanvas.getContext('2d');

// 初始化变量
let dotSize = parseInt(dotSizeSlider.value);
let spacing = parseInt(spacingSlider.value);
let threshold = parseInt(thresholdSlider.value);

// 更新显示值的函数
function updateSliderValues() {
    dotSizeValue.textContent = dotSize;
    spacingValue.textContent = spacing;
    thresholdValue.textContent = threshold;
}

// 监听滑块变化
dotSizeSlider.addEventListener('input', (e) => {
    dotSize = parseInt(e.target.value);
    updateSliderValues();
    if (currentImage) convertToDotMatrix(currentImage);
});

spacingSlider.addEventListener('input', (e) => {
    spacing = parseInt(e.target.value);
    updateSliderValues();
    if (currentImage) convertToDotMatrix(currentImage);
});

thresholdSlider.addEventListener('input', (e) => {
    threshold = parseInt(e.target.value);
    updateSliderValues();
    if (currentImage) convertToDotMatrix(currentImage);
});

let currentImage = null;

// 监听文件上传
fileInput.addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (!file || !file.type.match('image.*')) return;

    const reader = new FileReader();
    
    reader.onload = function(event) {
        const img = new Image();
        img.onload = function() {
            currentImage = img;
            convertToDotMatrix(img);
        };
        img.src = event.target.result;
    };
    reader.readAsDataURL(file);
});

// 核心函数：将图片转换为点阵
function convertToDotMatrix(image) {
    // 1. 设置原始Canvas尺寸为图片尺寸，并绘制图片
    originalCanvas.width = image.width;
    originalCanvas.height = image.height;
    ctxOriginal.clearRect(0, 0, originalCanvas.width, originalCanvas.height);
    ctxOriginal.drawImage(image, 0, 0);

    // 2. 计算点阵Canvas的尺寸
    // 点阵图的宽高由网格数量（原图尺寸/间距）和点的大小决定
    const cols = Math.ceil(originalCanvas.width / spacing);
    const rows = Math.ceil(originalCanvas.height / spacing);
    
    dotMatrixCanvas.width = cols * spacing;
    dotMatrixCanvas.height = rows * spacing;

    // 3. 清除点阵Canvas，设置白色背景
    ctxDotMatrix.fillStyle = 'white';
    ctxDotMatrix.fillRect(0, 0, dotMatrixCanvas.width, dotMatrixCanvas.height);
    ctxDotMatrix.fillStyle = 'black'; // 设置点的颜色为黑色

    // 4. 获取原始Canvas的像素数据
    // ImageData.data 是一个一维数组，包含 [R, G, B, A, R, G, B, A, ...] 格式的数据
    const imageData = ctxOriginal.getImageData(0, 0, originalCanvas.width, originalCanvas.height);
    const data = imageData.data;

    // 5. 遍历网格，进行采样和绘制
    for (let y = 0; y < rows; y++) {
        for (let x = 0; x < cols; x++) {
            // 计算当前网格在原始图像上的起始像素位置
            const startX = x * spacing;
            const startY = y * spacing;

            // 6. 计算当前网格区域的平均亮度
            let totalBrightness = 0;
            let sampleCount = 0;

            // 在网格内采样像素（可以优化为间隔采样以提高性能）
            for (let subY = startY; subY < startY + spacing && subY < originalCanvas.height; subY++) {
                for (let subX = startX; subX < startX + spacing && subX < originalCanvas.width; subX++) {
                    // 计算当前像素在ImageData数组中的索引
                    const pixelIndex = (subY * originalCanvas.width + subX) * 4;
                    const r = data[pixelIndex];     // 红色值 (0-255)
                    const g = data[pixelIndex + 1]; // 绿色值 (0-255)
                    const b = data[pixelIndex + 2]; // 蓝色值 (0-255)

                    // ！！！核心知识点：计算像素的亮度（灰度值）
                    // 使用标准亮度公式，模拟人眼对不同颜色的敏感度
                    // 权重：绿色最敏感(0.587) > 红色次之(0.299) > 蓝色最不敏感(0.114)
                    const brightness = 0.299 * r + 0.587 * g + 0.114 * b;
                    
                    totalBrightness += brightness;
                    sampleCount++;
                }
            }

            // 计算网格区域的平均亮度
            const averageBrightness = totalBrightness / sampleCount;

            // 7. 阈值判定：如果平均亮度低于阈值，则绘制圆点
            if (averageBrightness < threshold) {
                // 计算圆点在点阵Canvas上的中心坐标
                const posX = x * spacing + spacing / 2;
                const posY = y * spacing + spacing / 2;

                // 绘制实心圆
                ctxDotMatrix.beginPath();
                ctxDotMatrix.arc(posX, posY, dotSize / 2, 0, Math.PI * 2);
                ctxDotMatrix.fill();
            }
            // 否则（亮度高于阈值），留白，不进行绘制
        }
    }
}

// 初始化滑块显示值
updateSliderValues();

三、核心原理解析：亮度公式

代码中最关键的一行是：

javascript 复制代码

const brightness = 0.299 * r + 0.587 * g + 0.114 * b;

这行代码使用的是灰度转换的标准算法（ITU-R BT.601） 。为什么不能简单地将RGB值平均 (r + g + b) / 3呢？

因为人眼视网膜上的三种感光细胞对不同颜色的敏感度是不同的：对绿色最敏感，红色次之，蓝色最不敏感。这个加权平均公式（绿色权重0.587最高，蓝色0.114最低）能够计算出更符合人眼主观亮度感知的灰度值，使得转换后的点阵图明暗关系更加自然和准确。

四、参数调整与效果优化

通过操作界面上的三个滑块，你可以创造出风格迥异的点阵效果：

点大小 (dotSize) ：控制每个圆点的半径。点越大，图像越粗犷，细节越少；点越小，则越精细。
点间距 (spacing) ：控制网格的密度。间距越大，点阵越稀疏，图像越抽象；间距越小，点阵越密集，保留的细节越多。
阈值 (threshold) ：这是控制图像对比度的关键参数。
- 调低阈值 (如 50) ：只有非常暗的区域才会画点，生成的图像点很少，整体很"淡"。
- 调高阈值 (如 200) ：大量灰色区域也会被判定为需要画点，生成的图像点很密集，整体很"浓"，对比度降低。

小技巧 ：尝试使用高间距 + 大点尺寸 来创造抽象的艺术海报效果，或者使用低间距 + 小点尺寸来制作精细的肖像邮票效果。

五、总结

通过这个项目，仅实现了一个有趣的图像处理工具，还深入理解了像素操作、灰度转换和采样等基本图形学概念。这个基础版本还有巨大的拓展空间：

彩色点阵：可以为暗、中、亮部区域分配不同的颜色，而不是只用黑色。
异形点：将圆点替换为方形、三角形甚至自定义形状。
动态化：将点阵化效果应用于视频流，实现实时点阵摄像头。
性能优化：对于大图，可以采用间隔采样等策略提升处理速度。

从图片到点阵：用JavaScript重现复古数码点阵艺术图