HTML5 Canvas 蒙版图像过滤器教程

要对 Konva.Image 应用过滤器，我们必须先使用 cache() 函数对其进行缓存。然后使用 filters() 函数应用过滤器。

要使用 Konva 对图像的颜色进行蒙版，我们可以使用 Konva.Filters.Mask 过滤器。

Konva.Filters.Mask 过滤器尝试从图像中去除背景。它的工作原理如下：

1. 采样图像四个角的颜色。
2. 如果角的颜色相似（在 threshold 范围内），则假设该颜色代表背景。
3. 然后，它创建一个蒙版，其中与已识别的背景颜色相似的像素变为透明，其他像素保持不变。
4. 使用图像处理技术（如侵蚀和膨胀）来精炼这个蒙版，以去除噪声和平滑边缘。
5. 最后，将精炼后的蒙版应用到图像的 alpha 通道。

threshold 属性（范围从 0 到 255）控制像素的颜色必须与背景颜色相似到什么程度才能被遮罩。较低的阈值意味着只有与背景非常接近的颜色会被删除，而较高的阈值则会删除更广泛的颜色。

说明：滑动控制以调整蒙版阈值。

有关所有可用过滤器，请访问 过滤器文档。

Vanilla

import Konva from 'konva';

const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight,
});

const layer = new Konva.Layer();
stage.add(layer);

const imageObj = new Image();
imageObj.onload = () => {
  const image = new Konva.Image({
    x: 50,
    y: 50,
    image: imageObj,
    draggable: true,
  });

  layer.add(image);

  image.cache();
  image.filters([Konva.Filters.Mask]);
  image.threshold(10);

  const slider = document.createElement('input');
  slider.type = 'range';
  slider.min = '0';
  slider.max = '255';
  slider.value = image.threshold();

  slider.style.position = 'absolute';
  slider.style.top = '20px';
  slider.style.left = '20px';

  slider.addEventListener('input', (e) => {
    const value = parseInt(e.target.value);
    image.threshold(value);
  });

  document.body.appendChild(slider);
};
imageObj.src = 'https://konvajs.org/assets/space.jpg';
imageObj.crossOrigin = 'anonymous';

React

import Konva from 'konva';
import { Stage, Layer, Image } from 'react-konva';
import { useState, useEffect, useRef } from 'react';
import useImage from 'use-image';

const App = () => {
  const [position, setPosition] = useState({ x: 50, y: 50 });
  const [threshold, setThreshold] = useState(10);
  const [image] = useImage('https://konvajs.org/assets/space.jpg', 'anonymous');
  const imageRef = useRef(null);

  useEffect(() => {
    if (image) {
      imageRef.current.cache();
    }
  }, [image]);

  return (
    <>
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          <Image
            ref={imageRef}
            x={position.x}
            y={position.y}
            image={image}
            draggable
            onDragEnd={(e) => {
              setPosition({ x: e.target.x(), y: e.target.y() });
            }}
            filters={[Konva.Filters.Mask]}
            threshold={threshold}
          />
        </Layer>
      </Stage>
      <input
        type="range"
        min="0"
        max="255"
        value={threshold}
        onChange={(e) => setThreshold(parseInt(e.target.value))}
        style={{ position: 'absolute', top: '20px', left: '20px' }}
      />
    </>
  );
};

export default App;

Vue

<template>
  <div>
    <v-stage :config="stageSize">
      <v-layer>
        <v-image
          ref="imageNode"
          :config="{
            x: 50,
            y: 50,
            image: image,
            draggable: true,
            filters: [Konva.Filters.Mask],
            threshold: threshold,
          }"
        />
      </v-layer>
    </v-stage>
    <input
      type="range"
      min="0"
      max="255"
      :value="threshold"
      @input="handleSlider"
      style="position: absolute; top: 20px; left: 20px"
    />
  </div>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue';
import { useImage } from 'vue-konva';
import Konva from 'konva';

const stageSize = {
  width: window.innerWidth,
  height: window.innerHeight,
};

const threshold = ref(10);
const imageNode = ref(null);
const [image] = useImage('https://konvajs.org/assets/space.jpg', 'anonymous');

watch(image, async (newImage) => {
  if (newImage) {
    // 等待下一个 DOM 更新
    await nextTick();
    // 现在图像组件已完全更新
    imageNode.value.getNode().cache();
  }
});

const handleSlider = (e) => {
  threshold.value = parseInt(e.target.value);
};
</script>