对比使用滤镜库 Philter 和 camanjs

Philter

https://specro.github.io/Philter/

生成 css 滤镜。可覆盖任何元素，如盖上视频上。不会真实改变元素的内容。

useEffect(() => {
  $script(process.env.PUBLIC_URL + "libs/philter.min.js", function () {
    new window.Philter({
      transitionTime: 0.5, // hover transition time
      tag: true, // 'philter' in data attributes
    });
  });
}, []);

直接使用 html 属性即可：

<div
  data-philter-hue-rotate="30"
  data-philter-contrast="125"
  data-philter-saturate="125"
  data-philter-brightness="125"
></div>

camanjs

http://camanjs.com/

生成全新的 canvas 画布，并替换掉原来的元素。没有 css 滤镜那么强大，但兼容性更好，使用 html2canvas 时也都能正常截取。

Caman("#my-image", function () {
  // === start 这里填写滤镜调用函数

  // Arguments: (R, G, B, strength)
  this.colorize(25, 180, 200, 20);

  // The other way is to specify a color in hex form:
  this.colorize("#4090D5", 20);
  // Using a string for the channel
  this.curves("rgb", [0, 0], [100, 120], [180, 240], [255, 255]);

  // Specifying individual color channels
  this.curves(["r", "b"], [0, 0], [100, 120], [180, 240], [255, 255]);

  // === end 这里填写滤镜调用函数

  this.render();
});

它会根据 img 的 src 的大小生成 canvas ，如果 src 图片真实大小与展示大小不相符，转化后的大小不对。可以通过以下方法解决：

<div
  className="haibao-img-box"
  style={{
    width: hsz(650),
    height: hsz(530),
  }}
>
  <img src={imgSrc} id="haibao-img" alt="" />
</div>

css 中限定 canvas 大小与外部容器一致

.haibao-img-box {
  img {
    width: 100% !important;
    height: 100% !important;
  }
  canvas {
    width: 100% !important;
    height: 100% !important;
  }
}

或者使用使用 resize 方法：

Caman("#my-image", function () {
  // ... 其他滤镜效果
  this.resize({
    width: hsz(650),
    height: hsz(530),
  });
  this.render();
});