HTML Canvas 视频上的 SVG 过滤器

Question

所以我想在 canvas 上创建毛刺效果，从网络摄像头获取每一帧。下面的代码。此处的代码仅在 width: 200px height: 200px 时有效，如果将此值更改为 width: 600px height: 400px（容器大小），故障效果将停止工作。这是您可以更改值 canvas.width、canvas.height 的代码，您可以自己查看 CodePen。有人知道这是什么原因以及如何解决吗？或者它对 feTurbulence 有一些限制？

const addEffect = (element, filter) => {
  element.style.webkitFilter = `url(#${filter})`;
  element.style.mozFilter = `url(#${filter})`;
  element.style.filter = `url(#${filter})`;
};

const runEffect = () => {
  const turb = document.querySelector('#displacement feTurbulence');
  const turbVal = { val: 0.000001 };

  const btTl = new TimelineLite({
    paused: true,
    onUpdate() {
      turb.setAttribute('baseFrequency', `0 ${turbVal.val}`);
    },
  });
  btTl.to(turbVal, 0.2, { val: 0.3 });
  btTl.to(turbVal, 0.2, { val: 0.000001 });

  btTl.restart();
};

const URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
const video = document.createElement('video');

navigator.mediaDevices.getUserMedia({
  video: true,
}).then((stream) => {
  video.src = URL.createObjectURL(stream);
});

const canvas = document.querySelector('#canvas');

const ctx = canvas.getContext('2d');
addEffect(canvas, 'displacement');
setInterval(() => runEffect(), 1000);

const loop = () => {
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  requestAnimationFrame(loop);
};
loop();

.container {
  margin: 0 auto;
  width: 600px;
  height: 400px;
  margin-top: 100px;
  box-shadow: 1px 1px 20px #666;
  position: relative;
}
.container > canvas {
  position: absolute;
  background-color: red;
  mix-blend-mode: darken;
}
svg {
  position: absolute;
  width: 0;
  height: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<div class="container">
      <canvas id="canvas" width="200px" height="200px"></canvas>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
        <defs>
          <filter id="displacement">
              <feTurbulence type="fractalNoise" baseFrequency="0.0" numOctaves="1" result="warp"></feTurbulence>
              <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="80" in="SourceGraphic" in2="warp" />
          </filter>
        </defs>
      </svg>
    </div>

Answer 1

似乎有一些错误导致 canvas 在大尺寸时重新绘制的速度不够快。您可以通过调整 CSS 属性强制重绘，例如下例中的不透明度。

const addEffect = (element, filter) => {
  element.style.webkitFilter = `url(#${filter})`;
  element.style.mozFilter = `url(#${filter})`;
  element.style.filter = `url(#${filter})`;
};

const runEffect = () => {
  const turb = document.querySelector('#displacement feTurbulence');
  const turbVal = { val: 0.000001 };

  const btTl = new TimelineLite({
    paused: true,
    onUpdate() {
      turb.setAttribute('baseFrequency', `0 ${turbVal.val}`);
    },
  });
  btTl.to(turbVal, 0.2, { val: 0.3 });
  btTl.to(turbVal, 0.2, { val: 0.000001 });

  btTl.restart();
};

const URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
const video = document.createElement('video');

navigator.mediaDevices.getUserMedia({
  video: true,
}).then((stream) => {
  video.src = URL.createObjectURL(stream);
});

const canvas = document.querySelector('#canvas');

const ctx = canvas.getContext('2d');
addEffect(canvas, 'displacement');
setInterval(() => runEffect(), 1000);

/**
 * Use a hack to force the canvas to redraw
 */
const refreshCanvas = function(){
  let on = true;
  return () => {
    on = !on;
    canvas.style.opacity = on ? 1 : 0.999;
  }
}();


const loop = (timestamp) => {
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    refreshCanvas(); // call our hack
    requestAnimationFrame(loop);
};
loop();

.container {
  margin: 0 auto;
  width: 600px;
  height: 400px;
  margin-top: 100px;
  box-shadow: 1px 1px 20px #666;
  position: relative;
}
.container > canvas {
  position: absolute;
  background-color: red;
  mix-blend-mode: darken;
}
svg {
  position: absolute;
  width: 0;
  height: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<div class="container">
      <canvas id="canvas" width="600" height="400"></canvas>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
        <defs>
          <filter id="displacement">
              <feTurbulence type="fractalNoise" baseFrequency="0.0" numOctaves="1" result="warp"></feTurbulence>
              <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="80" in="SourceGraphic" in2="warp" />
          </filter>
        </defs>
      </svg>
    </div>

HTML Canvas 视频上的 SVG 过滤器

SVG Filter on HTML Canvas Video

html

javascript

css

webcam

canvas