javascript - 使用 GLFX.js 组合效果

Question

我一直在玩弄 GLFX.js 并且能够设置一些效果。然而，我缺少的是在某种分层/混合中将每种效果一起使用的能力。目前，如果我增加 Sepia 的 slider ，然后增加 Saturation 的值，Sepia 将重置。我倾向于在每次更新 slider 时以某种方式保存图像效果的当前值，但不确定如何去做。任何帮助将不胜感激。先感谢您!这是我的 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);
};