1

我对 Camanjs 库有几个问题。

1. React中如何导入camanjs？我尝试通过 npm 安装 caman 但没有成功，我还安装了所有提到的附加依赖项（node-gyp & 安装 GTK 2）但似乎没有任何效果。那么有人知道如何在 React 中使用 Camanjs 吗？

2.场景：我使用 camanjs 应用亮度（10）然后对比度（10）。

问题现在，如果我应用亮度，这可以正常工作，但是当我应用对比度时，它会删除亮度并且只应用对比度。这一定是因为我在应用任何新过滤器之前使用了 revert(false) 。

 this.revert(false)

我想同时应用这两个过滤器。我怎样才能做到这一点。这可以通过使用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)
    }
  };
4

0 回答 0