Question

我一直在玩GLFX.js并且能够设置一些效果。然而，我缺少的是能够在一种分层/混合中一起使用每种效果。目前，如果我增加说明棕褐色的滑块，然后增加饱和度值，则重置乌贼属。我倾向于每次滑块更新时都需要保存效果的当前值，但不知道如何去做。任何帮助将不胜感激。先感谢您！这是我的Javascript代码：
`

window.onload = function() {
  // try to create a WebGL canvas (will fail if WebGL isn't supported)
  try {
    var canvas = fx.canvas();
  } catch (e) {
    alert(e);
    return;
  }

  // convert the image to a texture
  var image = document.getElementById("image");
  var texture = canvas.texture(image);

  let sepiaSlider, sepiaFilter, hueSatFltr, hueSldr, satSldr;

  canvas.draw(texture).update();

  sepiaSlider = document.getElementById("sepia-slider");

  hueSldr = document.getElementById("hue-slider");

  satSldr = document.getElementById("sat-slider");

  hueSldr.addEventListener("input", function(hueVal) {
    hueVal = this.value;
    console.log(hueVal);
    canvas.draw(texture).hueSaturation(hueVal, 0).update();
  });

  satSldr.addEventListener("input", function(satVal) {
    satVal = this.value;
    canvas
      .draw(texture)
      .hueSaturation(0, satVal)
      .update();
  });

  sepiaSlider.addEventListener("input", function(sepiaValue) {
    sepiaValue = this.value;
    console.log(sepiaValue);
    canvas
      .draw(texture)
      .sepia(sepiaValue)
      .update();
  });

  // replace the image with the canvas
  image.parentNode.insertBefore(canvas, image);
  image.parentNode.removeChild(image);
};

`

Answer 1

我正在和一位同事交谈，他能够帮助我找到更直接的解决方案。对于任何感兴趣的人，它涉及使用类。这是清理过的javascript解决方案：

 /*jshint esversion: 6 */

//set the intial value of canvas so it can be used throughout the program
let canvas = null;

//create a class to hold the intial values
class CurrentSettings {
  constructor(canvas, texture) {
    this.canvas = canvas;
    this.texture = texture;
    this.hue = 0;
    this.sat = 0;
    this.sepia = 0;
    this.brtness = 0;
    this.cntrst = 0;
    this.vgnteSize = 0;
    this.vgnteAmnt = 0;
    this.vbrnce = 0;
  }

  //set the initial values of each effect
  setHue(fValue) {
    this.hue = fValue;
    this.update();
  }

  setSaturation(fValue) {
    this.sat = fValue;
    this.update();
  }

  setSepia(fValue) {
    this.sepia = fValue;
    this.update();
  }

  setBrightness(fValue) {
    this.brtness = fValue;
    this.update();
  }

  setContrast(fValue) {
    this.cntrst = fValue;
    this.update();
  }

  setVignetteSize(fValue) {
    this.vgnteSize = fValue;
    this.update();
  }

  setVignetteAmt(fValue) {
    this.vgnteAmnt = fValue;
    this.update();
  }

  setVibrance(fValue) {
    this.vbrnce = fValue;
    this.update();
  }

  //update the values if the slider is modified
  update() {
    this.canvas.draw(this.texture);
    if (this.hue > 0 || this.sat > 0)
      this.canvas.hueSaturation(this.hue, this.sat);
    if (this.sepia > 0) this.canvas.sepia(this.sepia);

    if (this.brtness > 0 || this.cntrst > 0)
      this.canvas.brightnessContrast(this.brtness, this.cntrst);
    if (this.vgnteSize > 0 || this.vgnteAmnt > 0)
      this.canvas.vignette(this.vgnteSize, this.vgnteAmnt);
    if (this.vbrnce > -1.1) this.canvas.vibrance(this.vbrnce);
    this.canvas.update();
  }
}

//set the initial value of the settings
let pSettings = null;

//if the browser does not support webgl, return an error message
window.onload = function() {
  try {
    canvas = fx.canvas();
  } catch (e) {
    alert(e);
    return;
  }

  //gets the image from the dom
  var image = document.getElementById("image");
  //convets the image from static dom to canvas
  var texture = canvas.texture(image);

  pSettings = new CurrentSettings(canvas, texture);

  //create the variables that will hold the event listeners
  let sepiaSlider,
    hueSldr,
    satSldr,
    brtnessSldr,
    cntrstSldr,
    vgnteSizeSldr,
    vgnteAmtSldr,
    vbrnceSldr;

  //draw the image onto the canvas
  canvas.draw(texture);

  //get all of the slider values
  sepiaSlider = document.getElementById("sepia-slider");

  hueSldr = document.getElementById("hue-slider");

  satSldr = document.getElementById("sat-slider");

  brtnessSldr = document.getElementById("brt-slider");

  cntrstSldr = document.getElementById("ctrs-slider");

  vgnteSizeSldr = document.getElementById("size-vgntte-slider");

  vgnteAmtSldr = document.getElementById("amnt-vgntte-slider");

  vbrnceSldr = document.getElementById("vbrnce-slider");

  //add an event listener to the sliders
  hueSldr.addEventListener("input", function(hueVal) {
    pSettings.setHue(this.value);
  });

  satSldr.addEventListener("input", function(satVal) {
    pSettings.setSaturation(this.value);
  });

  sepiaSlider.addEventListener("input", function(sepiaValue) {
    pSettings.setSepia(this.value);
  });

  brtnessSldr.addEventListener("input", function(brtnessValue) {
    pSettings.setBrightness(this.value);
  });

  cntrstSldr.addEventListener("input", function(cntrstValue) {
    pSettings.setContrast(this.value);
  });

  vgnteSizeSldr.addEventListener("input", function(vgnteSizeValue) {
    pSettings.setVignetteSize(this.value);
  });

  vgnteAmtSldr.addEventListener("input", function(vgnteAmtValue) {
    pSettings.setVignetteAmt(this.value);
  });

  vbrnceSldr.addEventListener("input", function(vbrnceSldrValue) {
    pSettings.setVibrance(this.value);
  });

  canvas.update();

  image.parentNode.insertBefore(canvas, image);
  image.parentNode.removeChild(image);
};

Answer 2

正如您可能知道的，由于跨域安全限制，我无法发布可运行的代码段，因此我只发布了源代码。它有效，我可以将“墨水”和“棕褐色”效果结合在一起。请注意，对draw和update只有一次调用所有效果。自己检查并告诉我它是否有用。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>glfx</title>
    <script src="glfx.js"></script>
  </head>
  <body>
    <form>
      <label><input name="ink" type="checkbox" value="ink"> Ink</label>
      <label><input name="sepia" type="checkbox" value="sepia"> Sepia</label>
      <input type="submit">
    </form>
    <img id="image" src="image.png">
    <script>
      var 
        form,
        canvas,
        image,
        texture
      ;
      onload = function () {
        canvas = fx.canvas();
        form = document.forms[0];
        image = document.getElementById("image");
        texture = canvas.texture(image);
        form.addEventListener("submit", onSubmit);
      };
      function onSubmit (ev) {
        var draw = canvas.draw(texture);
        ev.preventDefault();
        if (form.elements.ink.checked) {
          draw = draw.ink(0.25);
        }
        if (form.elements.sepia.checked) {
          draw = draw.sepia(0.75);
        }
        draw.update();
        image.src = canvas.toDataURL("image/png");
      }
    </script>
  </body>
</html>

要使其运行，您需要一台HTTP服务器。 Ubuntu说明：

$ cd /tmp
$ wget "http://i.stack.imgur.com/VqFm1.jpg?s=328&g=1" -O image.png
$ wget http://evanw.github.io/glfx.js/glfx.js
$ head -6 demo.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>glfx</title>
    <script src="glfx.js"></script>
$ python -m SimpleHTTPServer

最后，打开Web浏览器并输入“localhost：8000 / demo.html”。

不要忘记按“提交”： - ）

使用GLFX.js组合效果

2 个答案: