如何使用KONVA根据像素RGB值按自定义计算规则设置对应颜色

你可以通过获取Konva对应canvas的像素数据做处理，再回写至Konva.Image实例实现需求，具体实现方案如下：

Konva没有直接封装像素读写API，你需要借助原生canvas的ImageData能力完成像素操作，整体流程为：加载原图 -> 读取像素数组 -> 按规则修改像素 -> 生成新图替换Konva.Image的内容。

// 1. 初始化Konva基础实例
const stage = new Konva.Stage({
  container: 'container', // 替换为你的页面挂载节点ID
  width: window.innerWidth,
  height: window.innerHeight
});
const layer = new Konva.Layer();
stage.add(layer);

// 2. 加载原始图片
const img = new Image();
img.crossOrigin = 'Anonymous'; // 跨域图片需加这个配置，同时服务端要开启CORS
img.src = '你的原图地址';
img.onload = function () {
  // 初始化Konva.Image
  const konvaImage = new Konva.Image({
    x: 0,
    y: 0,
    image: img,
    width: img.width,
    height: img.height
  });
  layer.add(konvaImage);
  layer.draw();

  // 3. 获取画布像素数据
  const canvas = layer.getContext()._context.canvas;
  const ctx = canvas.getContext('2d');
  const imageData = ctx.getImageData(0, 0, img.width, img.height);
  const data = imageData.data;

  // 4. 按指定规则处理每个像素
  for (let i = 0; i < data.length; i += 4) {
    const R = data[i];
    const G = data[i + 1];
    const B = data[i + 2];
    const avg = (R + G + B) / 3;
    if (avg > 200) {
      data[i] = 255;
      data[i + 1] = 255;
      data[i + 2] = 255;
    } else {
      data[i] = 200;
      data[i + 1] = 200;
      data[i + 2] = 200;
    }
    // 透明度通道保持默认，不需要修改可直接跳过
  }

  // 5. 处理后的像素写回临时画布，生成新图替换Konva.Image内容
  const tempCanvas = document.createElement('canvas');
  tempCanvas.width = img.width;
  tempCanvas.height = img.height;
  const tempCtx = tempCanvas.getContext('2d');
  tempCtx.putImageData(imageData, 0, 0);

  const processedImg = new Image();
  processedImg.src = tempCanvas.toDataURL();
  processedImg.onload = function () {
    konvaImage.image(processedImg);
    layer.draw();
  }
}

• 跨域图片必须配置CORS规则，否则浏览器会禁止读取像素数据，触发安全报错
• 处理超大尺寸图片时可以拆分区域分批处理，避免主线程阻塞卡顿

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