在Canvas中实现OpenLayers地图BMP图像的图案重色处理

我正在开发OpenLayers地图的特殊图案叠加层，现有代码可基于Base64编码的BMP图像创建重复图案。已知配置中存在白色替换白色的冗余颜色规则，但因该规则来自数据馈送需保留。需要将drawImage结合像素操作的图像重色逻辑整合到现有代码中。

整合后的完整代码 #

const symbol = {
  kind: 'Icon',
  image:'', // 填入Base64编码的BMP图像
  colors:[
    {
      "oldColor" : [ 0, 0, 0, 100 ],
      "newColor" : [ 64, 101, 235, 100 ]
    },
    {
      "oldColor" : [ 255, 255, 255, 100 ] ,
      "newColor" : [ 255, 255, 255, 100 ]
    }
  ]
};

if (symbol.kind === 'Icon') {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  const img = new Image();
  // 处理跨域（若Base64图像来自外部源需添加）
  img.crossOrigin = 'anonymous';
  img.src = symbol.image;

  img.onload = () => {
    // 让画布尺寸和图像一致
    canvas.width = img.width;
    canvas.height = img.height;

    // 1. 将原始图像绘制到画布
    ctx.drawImage(img, 0, 0);

    // 2. 获取像素数据并执行颜色替换
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    for (let i = 0; i < data.length; i += 4) {
      symbol.colors.forEach(colorRule => {
        const [oldR, oldG, oldB] = colorRule.oldColor;
        // 匹配RGB通道（如需处理Alpha可拓展）
        if (data[i] === oldR && data[i+1] === oldG && data[i+2] === oldB) {
          const [newR, newG, newB] = colorRule.newColor;
          data[i] = newR;
          data[i+1] = newG;
          data[i+2] = newB;
          // 如需替换Alpha通道，取消下面注释：
          // data[i+3] = colorRule.newColor[3];
        }
      });
    }

    // 3. 将修改后的像素放回画布
    ctx.putImageData(imageData, 0, 0);

    // 4. 基于处理后的画布创建重复图案
    const pattern = ctx.createPattern(canvas, 'repeat');
    symbol.color = pattern;
    delete symbol.image;
  };
}

关键整合说明 #

• 画布尺寸匹配：图像加载完成后，把canvas的宽高设置为图像实际尺寸，确保像素操作能覆盖完整图像
• 像素处理顺序：先绘制原始图像到画布，再读取像素数据做颜色替换，最后将修改后的像素数据放回画布
• 颜色规则应用：遍历预设的颜色规则，匹配像素的RGB通道后执行替换；如果需要处理Alpha通道，取消代码中对应注释行即可
• 图案生成：基于处理后的画布而非原始图像创建重复图案，保证最终图案已经应用了颜色替换效果

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