图像添加黑条的算法异常问题及优化方案咨询

你的代码仅在特定参数下生效，核心问题出在浮点数索引的错误处理：

1. 当divisions = 2*cuts +1无法整除画布高度时，k*lines/divisions会得到浮点数（比如cuts=3、画布高度为1000时，1000/9≈111.11）。你直接用这个浮点数作为循环起始值i，后续i++会生成一系列带小数的数值。
2. JavaScript数组索引会自动将浮点数取整，但这会导致实际操作的行号和预期不符——要么跳过部分行，要么重复修改，最终黑条无法正确渲染。
3. 仅当画布高度能被divisions整除时（比如1080÷(2×7+1)=72，刚好是整数），索引才会是正确的整数，这就是为什么只有特定cuts值和1920x1080分辨率能生效。

通过将行位置转换为整数，确保循环操作的是正确的像素行：

rectangleButton.addEventListener("click", () => {
    if(loadCounter === 4) {
        const cuts = parseInt(text.value);
        text.value = "";
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");
        const divisions = 2 * cuts + 1;
        const lineHeight = Math.floor(canvas.height / divisions);
        const totalLines = canvas.height;
        const columns = canvas.width;

        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const data = imageData.data;

        // 遍历所有需要涂黑的行块
        for (let k = 1; k < 2 * cuts; k += 2) {
            const startRow = k * lineHeight;
            // 处理最后一块可能的高度偏差（当无法整除时）
            const endRow = Math.min((k + 1) * lineHeight, totalLines);
            
            for (let i = startRow; i < endRow; i++) {
                const rowOffset = i * columns * 4;
                for (let j = 0; j < columns; j++) {
                    const pixelOffset = rowOffset + j * 4;
                    data[pixelOffset] = 0;     // R
                    data[pixelOffset + 1] = 0; // G
                    data[pixelOffset + 2] = 0; // B
                }
            }
        }

        ctx.putImageData(imageData, 0, 0);
    } else {
        alert("图片未加载完成");
    }
});

手动修改ImageData效率极低，尤其是大尺寸图像。直接用fillRect绘制黑条，利用Canvas硬件加速，代码更简洁且性能更好：

rectangleButton.addEventListener("click", () => {
    if(loadCounter === 4) {
        const cuts = parseInt(text.value);
        text.value = "";
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");
        const divisions = 2 * cuts + 1;
        const barHeight = Math.floor(canvas.height / divisions);
        const remainingHeight = canvas.height % divisions;

        ctx.fillStyle = "#000";
        // 绘制所有黑条
        for (let k = 1; k < 2 * cuts; k += 2) {
            const y = k * barHeight;
            // 最后一块补全剩余高度
            const height = (k + 1 === 2 * cuts) ? barHeight + remainingHeight : barHeight;
            ctx.fillRect(0, y, canvas.width, height);
        }
    } else {
        alert("图片未加载完成");
    }
});

这个算法的优势：

• 无需遍历每个像素，性能提升数倍
• 代码逻辑更清晰，易维护
• 自动处理分辨率无法整除的情况，适配所有尺寸和cuts值

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