跳到主要内容

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);

  // create sliders
  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';

  // add labels
  const strengthLabel = document.createElement('div');
  strengthLabel.textContent = 'Strength';
  strengthLabel.style.position = 'absolute';
  strengthLabel.style.top = '20px';
  strengthLabel.style.left = '200px';

  const whiteLevelLabel = document.createElement('div');
  whiteLevelLabel.textContent = 'White Level';
  whiteLevelLabel.style.position = 'absolute';
  whiteLevelLabel.style.top = '45px';
  whiteLevelLabel.style.left = '200px';

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

  // add event listeners
  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));
  });

  // add elements to the page
  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/darth-vader.jpg';
imageObj.crossOrigin = 'anonymous';