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) {
    // wait for the next DOM update
    await nextTick();
    // now the image component is fully updated
    imageNode.value.getNode().cache();
  }
});

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