如何使用JavaScript验证上传的位图是否为有效遮罩图像？

需求说明 #

• 在Canvas上显示主位图（支持JPG、PNG格式）
• 允许上传一张位图作为主位图的遮罩
• 实现isMaskValid函数，验证上传的位图是否符合遮罩图像的定义

遮罩图像定义 #

遮罩图像是一种指定绘制区域的单色位图，通过逐像素生成原始图像的透明度分量：

• 黑色像素（RGB 0,0,0）对应最终图像全透明（alpha 0）
• 白色像素（RGB 255,255,255）对应最终图像全不透明（alpha 255）
• 中间RGB值对应半透明效果

代码实现 #

// 获取Canvas上下文
const context = canvas.getContext('2d');
// 绘制主位图
context.drawImage(bg, 0, 0, canvas.width, canvas.height);

// 遮罩文件输入事件监听
const maskInput = document.getElementById('maskInput');
const mask = new Image();
const maskImage = document.getElementById('maskImage');

maskInput.addEventListener('change', () => {
    mask.src = URL.createObjectURL(maskInput.files[0]);
    mask.onload = function() {  
        maskImage.setAttribute('src', mask.src);
        const isValid = isMaskValid(mask);
        console.log(isValid ? '遮罩图像有效' : '遮罩图像无效');
        draw();
    }
});

/**
 * 验证遮罩图像是否有效
 * @param {HTMLImageElement} maskImage - 待验证的遮罩图像
 * @returns {boolean} 是否为有效遮罩
 */
function isMaskValid(maskImage){
    // 创建临时Canvas读取像素数据
    const tempCanvas = document.createElement('canvas');
    const tempCtx = tempCanvas.getContext('2d');
    
    tempCanvas.width = maskImage.width;
    tempCanvas.height = maskImage.height;
    tempCtx.drawImage(maskImage, 0, 0);
    
    const imageData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
    const data = imageData.data;
    
    // 遍历像素，检查是否为单色（R=G=B）
    for(let i = 0; i < data.length; i += 4){
        const r = data[i];
        const g = data[i+1];
        const b = data[i+2];
        if(r !== g || g !== b){
            return false;
        }
    }
    
    return true;
}

function draw(){
    // 此处编写遮罩应用到主位图的绘制逻辑
}

验证逻辑说明 #

• 通过临时Canvas读取遮罩图像的像素数据
• 遍历每个像素，检查红、绿、蓝通道值是否完全相等（单色图像的核心特征）
• 只要存在一个像素的RGB值不匹配，直接返回无效；所有像素满足R=G=B则返回有效

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