Coursera HTML课程项目：Canvas图片转灰度代码异常原因排查请求

我来帮你捋捋代码里的问题，搞清楚为什么循环没执行或者灰度图没显示出来：

核心问题1：灰度图的数据源选得不对 #

你在changeToGrayscale()里直接用new SimpleImage(input)创建灰度图，但这里有个坑：就算用户之前选过图片，重新从input创建SimpleImage时，可能会因为图片没加载完成，导致后续遍历像素的循环拿不到数据（Coursera的SimpleImage库得等图片加载好才能操作像素）。

更靠谱的做法是基于已经加载好的originalImg来创建灰度图，毕竟你在selectImage()里已经把图片加载完成了，没必要再重新读一遍input，还能避免加载时机的问题。

核心问题2：多余的setPixel拖后腿 #

循环里你修改完pixel的RGB值后，又调用了grayscaleImg.setPixel(...)——其实Coursera的SimpleImage里，遍历values()拿到的pixel是直接引用图片里的像素的，你改了它的RGB之后，图片里的像素就直接变了，根本不需要再调用setPixel，这步不仅多余，甚至可能搞乱像素数据。

核心问题3：条件判断的小瑕疵 #

你用imageEmpty(grayscaleImg)判断灰度图是否为空，这意味着只有第一次调用changeToGrayscale()时会生成灰度图，之后再点按钮就不会执行了。如果之后你想重新生成灰度图（比如换了新图片），还得重置grayscaleImg为null，我在修复代码里加上了这一步。

修复后的完整代码 #

var originalImg = null; 
var grayscaleImg = null; 
var input; 
var canvas; 

function selectImage() { 
    canvas = document.getElementById("canvas"); 
    input = document.getElementById("input"); 
    originalImg = new SimpleImage(input); 
    originalImg.drawTo(canvas); 
    // 每次选新图时重置灰度图，确保下次调用能重新生成
    grayscaleImg = null;
} 

function changeToGrayscale() { 
    // 先检查原图是否已加载，防止用户没选图就点按钮
    if (originalImg === null) {
        alert("请先选择一张图片哦！");
        return;
    }
    if (imageEmpty(grayscaleImg)) { 
        // 用已加载的原图创建灰度图，避免重复加载的问题
        grayscaleImg = new SimpleImage(originalImg); 
        for (var pixel of grayscaleImg.values()) { 
            var average = (pixel.getRed() + pixel.getGreen() + pixel.getBlue()) / 3; 
            setRGB(average, average, average, pixel); 
            // 删掉多余的setPixel调用
        } 
    }
    // 不管是不是第一次生成，每次调用都绘制灰度图
    grayscaleImg.drawTo(canvas); 
} 

function imageEmpty(image) { 
    return(image === null); 
} 

function setRGB(r, g, b, pixel) { 
    pixel.setRed(r); 
    pixel.setGreen(g); 
    pixel.setBlue(b); 
}

为啥原来的代码没生效？ #

• 如果是循环根本没执行：大概率是new SimpleImage(input)创建的实例还没加载完图片，导致grayscaleImg.values()没有可遍历的像素，循环直接跳过了。改用已加载好的originalImg就能解决这个加载时机的问题。
• 如果是循环执行了但没显示：要么是多余的setPixel搞乱了像素数据，要么是你只在第一次生成灰度图时绘制了一次，后续调用没重新绘制。修复后每次点按钮都会把灰度图画到画布上，就能正常显示了。

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