Skip to main content

HTML5 Canvas 浮雕滤镜图像教程

要对 Konva.Image 应用滤镜，我们首先需要使用 cache() 函数缓存它。然后使用 filters() 函数应用滤镜。

说明：滑动控件以更改浮雕值。

要了解所有可用的滤镜，请访问 滤镜文档。

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.Emboss]);
  image.embossStrength(0.5);
  image.embossWhiteLevel(0.5);
  image.embossDirection('top-left');
  image.embossBlend(0.5);

  // 创建滑块
  const strengthSlider = document.createElement('input');
  strengthSlider.type = 'range';
  strengthSlider.min = '0';
  strengthSlider.max = '1';
  strengthSlider.step = '0.1';
  strengthSlider.value = image.embossStrength();
  strengthSlider.style.position = 'absolute';
  strengthSlider.style.top = '20px';
  strengthSlider.style.left = '20px';

  const whiteLevelSlider = document.createElement('input');
  whiteLevelSlider.type = 'range';
  whiteLevelSlider.min = '0';
  whiteLevelSlider.max = '1';
  whiteLevelSlider.step = '0.1';
  whiteLevelSlider.value = image.embossWhiteLevel();
  whiteLevelSlider.style.position = 'absolute';
  whiteLevelSlider.style.top = '45px';
  whiteLevelSlider.style.left = '20px';

  const blendSlider = document.createElement('input');
  blendSlider.type = 'range';
  blendSlider.min = '0';
  blendSlider.max = '1';
  blendSlider.step = '0.1';
  blendSlider.value = image.embossBlend();
  blendSlider.style.position = 'absolute';
  blendSlider.style.top = '70px';
  blendSlider.style.left = '20px';

  // 添加标签
  const strengthLabel = document.createElement('div');
  strengthLabel.textContent = '强度';
  strengthLabel.style.position = 'absolute';
  strengthLabel.style.top = '20px';
  strengthLabel.style.left = '200px';

  const whiteLevelLabel = document.createElement('div');
  whiteLevelLabel.textContent = '白色级别';
  whiteLevelLabel.style.position = 'absolute';
  whiteLevelLabel.style.top = '45px';
  whiteLevelLabel.style.left = '200px';

  const blendLabel = document.createElement('div');
  blendLabel.textContent = '混合';
  blendLabel.style.position = 'absolute';
  blendLabel.style.top = '70px';
  blendLabel.style.left = '200px';

  // 添加事件监听器
  strengthSlider.addEventListener('input', (e) => {
    image.embossStrength(parseFloat(e.target.value));
  });

  whiteLevelSlider.addEventListener('input', (e) => {
    image.embossWhiteLevel(parseFloat(e.target.value));
  });

  blendSlider.addEventListener('input', (e) => {
    image.embossBlend(parseFloat(e.target.value));
  });

  // 将元素添加到页面
  document.body.appendChild(strengthSlider);
  document.body.appendChild(whiteLevelSlider);
  document.body.appendChild(blendSlider);
  document.body.appendChild(strengthLabel);
  document.body.appendChild(whiteLevelLabel);
  document.body.appendChild(blendLabel);
};
imageObj.src = 'https://konvajs.org/assets/lion.png';
imageObj.crossOrigin = 'anonymous';
Open on CodeSandboxOpen Sandbox