如何使用css来改变图像中某一颜色的像素？

// 创建一个Image对象
var image = new Image();
image.src = 'image.jpg';

// 等待图像加载完成后执行
image.onload = function() {
  // 创建一个Canvas元素
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
  
  // 将Canvas的尺寸设置为图像的尺寸
  canvas.width = image.width;
  canvas.height = image.height;
  
  // 将图像绘制到Canvas上
  context.drawImage(image, 0, 0);
  
  // 获取Canvas上的像素数据
  var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
  var data = imageData.data;
  
  // 遍历像素数据，将指定颜色的像素修改为其他颜色
  for (var i = 0; i < data.length; i += 4) {
    // 判断当前像素是否为指定颜色（这里以红色为例）
    if (data[i] === 255 && data[i + 1] === 0 && data[i + 2] === 0) {
      // 修改像素颜色（这里将红色修改为蓝色）
      data[i] = 0;
      data[i + 1] = 0;
      data[i + 2] = 255;
    }
  }
  
  // 将修改后的像素数据重新绘制到Canvas上
  context.putImageData(imageData, 0, 0);
  
  // 将Canvas转为Base64编码的图像数据
  var modifiedImage = canvas.toDataURL();
  
  // 输出修改后的图像
  console.log(modifiedImage);
};