javascript - 如何将 CamanJS 过滤器转换为 KineticJS 过滤器？

Question

来自CamanJS给定以下过滤器:

Caman.Filter.register("lomo", function(vignette) {
    if (vignette == null) {
      vignette = true;
    }
    this.brightness(15);
    this.exposure(15);
    this.curves('rgb', [0, 0], [200, 0], [155, 255], [255, 255]);
    this.saturation(-20);
    this.gamma(1.8);
    if (vignette) {
      this.vignette("50%", 60);
    }
    return this.brightness(5);
  });

如何将此过滤器转换为 KineticJS等价？

Answer 1

CamanJS 和 KineticJS 过滤器的实现方式非常不同。

KineticJS 过滤器一次操作像素数据。

CamanJS 使用增量更改图像的子系统(子系统==this.brightness、this.exposure 等)。

因此，没有简单的方法可以将 CamanJS 过滤器转换为 KineticJS 过滤器

为此，您必须重构许多 CamanJS 子系统并将其嵌入到 KineticJS 中。

您可以这样做，因为 CamanJS 和 KineticJS 都是具有自由许可的开源代码，但这意味着从 CamanJS 重构并至少将以下子系统(及其依赖项)添加到 KineticJS 中:https://github.com/meltingice/CamanJS/blob/master/dist/caman.full.js

• 亮度，
• 曝光，
• 曲线，
• 饱和度，
• Gamma

也许更好的主意是在内存 Canvas 上使用 CamanJS 应用过滤器。然后，您可以使用内存中的 Canvas 作为 Kinetic.Image 的图像源。以下是有关如何执行此操作的链接:KineticJS canvas modified by CamanJS