Flutter/Dart：如何修改ui.Image的内容颜色而非背景？

方法一：使用Canvas像素操作（精准控制） #

这种方法直接修改图像像素，适合仅包含白背景黑内容的图像：

• 创建Canvas元素并匹配图像尺寸

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = image.width;
canvas.height = image.height;

• 绘制原图像到Canvas并获取像素数据

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

• 遍历像素，替换黑色为目标颜色（这里以红色为例）

for (let i = 0; i < data.length; i += 4) {
  // 判断是否为黑色（RGBA值为0,0,0,255）
  if (data[i] === 0 && data[i+1] === 0 && data[i+2] === 0 && data[i+3] === 255) {
    // 替换为红色
    data[i] = 255;     // R
    data[i+1] = 0;     // G
    data[i+2] = 0;     // B
    // Alpha通道保持不变
  }
}

• 将修改后的像素数据放回Canvas并绘制

ctx.putImageData(imageData, 0, 0);
// 此时Canvas已完成颜色替换，可直接使用drawImage绘制到目标画布
targetCtx.drawImage(canvas, x, y);

方法二：使用Canvas合成模式（更高效） #

利用合成模式可以避免遍历像素，适合快速实现：

• 创建Canvas元素并获取上下文，匹配图像尺寸

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = image.width;
canvas.height = image.height;

• 先绘制目标颜色的矩形覆盖整个Canvas

ctx.fillStyle = '#ff0000'; // 红色
ctx.fillRect(0, 0, canvas.width, canvas.height);

• 设置合成模式为destination-in，再绘制原图像

ctx.globalCompositeOperation = 'destination-in';
ctx.drawImage(image, 0, 0);

• 恢复默认合成模式，绘制白色背景（如果需要保留白背景）

ctx.globalCompositeOperation = 'destination-over';
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 恢复默认合成模式
ctx.globalCompositeOperation = 'source-over';

• 将处理后的Canvas绘制到目标画布

targetCtx.drawImage(canvas, x, y);

注意：合成模式方法中，destination-in会保留目标（已绘制的红色）和源（原图像）重叠的部分，也就是原图像的黑色内容会保留红色，原图像的白色背景会被透明化，所以需要最后绘制白色背景来恢复。

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