如何用JavaScript修改BMP文件颜色（将黄色改为绿色）？

嘿，我来帮你搞定这个需求！首先咱们得先搞清楚BMP文件的像素存储逻辑——普通24位BMP的像素是按**BGR（蓝-绿-红）**顺序存储的，每个像素占3字节。黄色对应的BGR值是0x00 0xFF 0xFF（蓝0，绿255，红255），而绿色则是0x00 0xFF 0x00（蓝0，绿255，红0），所以咱们只需要把所有黄色像素的红色通道值改成0就行。

接下来咱们修改你的代码，添加颜色替换的逻辑：

<body onload=' 
  // Reset the textarea value 
  m.value="00"; 
  // Init the top cell content 
  for(i=0;i<16;i++) t.innerHTML+=(0+i.toString(16)).slice(-2)+" "; 
'>
<input type="file" id="w" onchange=' 
  // When a file is selected, reset h 
  let h = ""; 
  // Read the uploaded file as an ArrayBuffer 
  const f = new FileReader();
  f.readAsArrayBuffer(w.files[0]); 
  f.onload=function(){ 
    const u = new Uint8Array(f.result);
    // 1. 获取BMP像素数据的起始偏移量（BMP文件头第10字节开始的4字节，小端序）
    const dataView = new DataView(f.result);
    const dataOffset = dataView.getUint32(10, true);
    
    // 2. 遍历像素数据，替换黄色为绿色
    // 从数据偏移位置开始，每3字节对应一个BGR像素
    for(let i = dataOffset; i < u.length; i += 3) {
      // 检查当前像素是否是黄色：B=0, G=255, R=255
      if(u[i] === 0 && u[i+1] === 255 && u[i+2] === 255) {
        // 将红色通道（第3字节）改为0，变成绿色
        u[i+2] = 0;
      }
    }
    
    // 3. 重新生成十六进制字符串
    for(let byte of u) {
      h += (0 + byte.toString(16)).slice(-2);
    }
    console.log(h); 
    // Write h in the hex textarea 
    m.value=h; 
    // Trigger oninput on hex textarea 
    if(typeof m.oninput === 'function') m.oninput();
  }
'>
<!-- 补充必要的页面元素 -->
<textarea id="m" rows="10" cols="50"></textarea>
<div id="t"></div>
</body>

关键代码解释： #

• 获取像素数据偏移量：BMP文件头的第10-13字节存储了像素数据相对于文件开头的偏移位置，用DataView的getUint32方法（小端序，因为BMP使用小端字节序）来读取这个值，确保我们从正确的位置开始处理像素。
• 颜色替换逻辑：从偏移位置开始，每3字节遍历一个像素，判断是否符合黄色的BGR值，符合的话就把红色通道（第三个字节，索引i+2）设为0，这样就变成了绿色。
• 更新十六进制字符串：修改完Uint8Array后，重新生成对应的十六进制字符串，更新到textarea中。

需要注意的是，这个方案适用于24位无Alpha通道的BMP文件，如果你的BMP是32位带Alpha的，只需要把遍历步长改成4，并且判断时忽略Alpha通道即可（比如i +=4，判断u[i]===0 && u[i+1]===255 && u[i+2]===255，Alpha通道u[i+3]保持不变）。

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