如何在JS中收缩带透明背景的PNG图像线条描边？

核心思路 #

你需要的是形态学腐蚀操作，这正是Photoshop Contract功能的底层逻辑：通过移除线条边缘的像素来实现收缩。针对你处理的黑色不透明、背景透明的PNG，直接用Canvas API操作像素数据就能实现需求。

具体代码实现 #

以下是可直接运行的代码，支持自定义收缩的像素幅度：

async function contractImage(image, contractPixels = 1) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = image.width;
    canvas.height = image.height;

    // 绘制原图到Canvas
    ctx.drawImage(image, 0, 0);
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    const width = imageData.width;
    const height = imageData.height;

    // 创建副本存储处理后的像素（避免修改原数据影响遍历）
    const outputData = new Uint8ClampedArray(data);

    // 定义腐蚀操作的范围（正方形区域，边长为2*contractPixels+1）
    const offset = contractPixels;

    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            const index = (y * width + x) * 4;
            // 跳过透明像素（仅处理黑色不透明像素）
            if (data[index + 3] === 0) continue;

            // 检查当前像素周围offset范围内是否存在透明像素
            let hasTransparent = false;
            for (let dy = -offset; dy <= offset; dy++) {
                for (let dx = -offset; dx <= offset; dx++) {
                    const nx = x + dx;
                    const ny = y + dy;
                    // 跳过画布外的像素
                    if (nx < 0 || nx >= width || ny < 0 || ny >= height) {
                        hasTransparent = true;
                        break;
                    }
                    const nIndex = (ny * width + nx) * 4;
                    if (data[nIndex + 3] === 0) {
                        hasTransparent = true;
                        break;
                    }
                }
                if (hasTransparent) break;
            }

            // 如果周围有透明像素，将当前像素设为透明
            if (hasTransparent) {
                outputData[index] = 0;
                outputData[index + 1] = 0;
                outputData[index + 2] = 0;
                outputData[index + 3] = 0;
            }
        }
    }

    // 将处理后的像素数据放回Canvas
    ctx.putImageData(new ImageData(outputData, width, height), 0, 0);
    return canvas;
}

// 使用示例
async function run() {
    const img = new Image();
    img.crossOrigin = 'anonymous'; // 处理跨域图像
    img.src = 'your-image.png';
    await img.decode();

    // 收缩2个像素
    const contractedCanvas = await contractImage(img, 2);
    // 可以将Canvas转为Blob或直接插入DOM
    document.body.appendChild(contractedCanvas);
}

run();

代码说明 #

• 腐蚀范围控制：contractPixels参数对应你要缩小的像素数，比如设为2就等同于Photoshop Contract里的2像素收缩。
• 像素遍历逻辑：遍历每个不透明像素，检查其周围指定范围内的所有像素，只要存在透明像素，就把当前像素置为透明——这相当于移除了线条最外层的像素，实现均匀收缩。
• 数据副本：处理时用outputData存储结果，避免修改原像素数据导致遍历过程出错。

为什么之前的方法无效？ #

• SVG转换后stroke:none：PNG转SVG时，工具通常会把黑色填充区域转为路径填充，而非描边，所以调整stroke-width不会生效，这种方法只适合原本就是描边路径的SVG。
• 位图细化算法：细化是将线条缩至单像素宽度，和Contract的均匀收缩需求不符，因此不适用。

注意事项 #

• 如果图像存在跨域问题，需确保图片服务器允许跨域访问（设置CORS头），或者将图片放在同域名下。
• 对于高分辨率图像，遍历所有像素可能存在性能问题，可考虑使用WebWorker处理，避免阻塞主线程。

内容的提问来源于stack exchange，提问作者Bee