Question

关于Camanjs库，我有几个问题。

1。。如何在React中导入camanjs？我已经尝试通过npm安装caman，但没有成功，我还安装了提到的所有附加依赖项（node-gyp和Installation GTK 2），但似乎无济于事。有人知道如何在React中使用Camanjs吗？

2。方案：我使用camanjs分别应用了亮度（10）和对比度（10）。

问题现在，如果我应用亮度，效果很好，但是当我应用对比度时，它将消除亮度，而仅应用对比度。这一定是因为在应用任何新过滤器之前，我正在使用revert（false）。

 this.revert(false)

我想同时应用两个过滤器。我怎样才能做到这一点。可以使用带有某些blendingMode的this.newLayer(function(){})来实现吗？

还是我必须将滤镜值保存在某个数组中，然后遍历并应用滤镜，然后渲染画布？

我也尝试使用

 this.reloadCanvasData();

虽然可以，但是当我将亮度和对比度的值都减小为0时，理想情况下它应该呈现原始图像，但画布会变成灰色或黑色。

任何人都可以指导或提供解决此问题的合适方法。提前致谢！！注意：在下面的代码中，您看到由于无法通过npm安装camanjs，因此必须通过CDN将其带入window对象。这是可行的，但是如果我尝试在

中使用“ this”，则会产生“ this”问题

this.newLayer(function(){
/*Somewhere here(this refers to React component instead of  Caman) */
})

我的代码：

 onChangeHandler = (e, val) => {
    e.persist();
    let valInLowercase = 'stackBlur';
    if(val !== 'Blur'){
     valInLowercase = val.toLowerCase();
  }
    let canvas = document.querySelector("canvas")
    let canavsID = canvas.getAttribute("id");
    canavsID = "#" + canavsID;
    window.caman(canavsID, function() {
      this.revert(false)
      this.reloadCanvasData();
        if (val !== "Contrast") {
          this[valInLowercase](e.target.value).render();
        } else {
            if(val === 'Contrast'){
              this[valInLowercase](e.target.value/2).render();  
            }
        }
      })

    if(e.type === "mouseup"){
        canvas.setAttribute(valInLowercase, e.target.value)
    }
  };

如何在Camanjs中彼此叠加应用过滤器？

0 个答案: