使用 GLFX.js 组合效果

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

您可能知道，由于跨源安全限制，我无法发布可运行的 sn-p，因此我只发布我的源代码。它有效，我可以同时应用“墨水”和“棕褐色”效果。请注意，对于所有效果，只有一次调用 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

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

别忘了按“提交”:-)