Javascript 使用GLFX.js组合效果_Javascript_Image Processing_Frameworks

Javascript 使用GLFX.js组合效果

javascript image-processing frameworks

Javascript 使用GLFX.js组合效果,javascript,image-processing,frameworks,Javascript,Image Processing,Frameworks,我一直在玩GLFX.js，能够设置一些效果。然而，我缺少的是在某种层次/混合中同时使用每个效果的能力。当前，如果我增加滑块，比如说Sepia，然后增加饱和值，Sepia将重置。我有一种倾向，每次滑块更新时，我都需要在图像上保存效果的当前值，但不确定如何进行。任何帮助都将不胜感激。提前谢谢你！以下是我的Javascript代码： ` `您可能知道，由于跨源安全限制，我无法发布可运行的代码段，因此我只发布源代码。它的作品，我能够应用“墨水”和“乌贼墨”的影响在一起。请注意，对于所有效果，只有一个调用

我一直在玩GLFX.js，能够设置一些效果。然而，我缺少的是在某种层次/混合中同时使用每个效果的能力。当前，如果我增加滑块，比如说Sepia，然后增加饱和值，Sepia将重置。我有一种倾向，每次滑块更新时，我都需要在图像上保存效果的当前值，但不确定如何进行。任何帮助都将不胜感激。提前谢谢你！以下是我的Javascript代码：
`

您可能知道，由于跨源安全限制，我无法发布可运行的代码段，因此我只发布源代码。它的作品，我能够应用“墨水”和“乌贼墨”的影响在一起。请注意，对于所有效果，只有一个调用

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>


glfx
墨水
乌贼墨
变量
形式，
帆布，
形象,，
纹理
;
onload=函数（）{
canvas=fx.canvas（）；
表单=文档。表单[0]；
image=document.getElementById（“image”）；
纹理=画布。纹理（图像）；
表格。附录列表（“提交”，提交）；
};
提交功能（ev）{
var draw=canvas.draw（纹理）；
ev.preventDefault（）；
if（表单.元素.墨水.选中）{
draw=draw.ink（0.25）；
}
if（form.elements.sepia.checked）{
draw=draw.sepia（0.75）；
}
draw.update（）；
image.src=canvas.toDataURL（“image/png”）；
}

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

$cd/tmp
$wget“http://i.stack.imgur.com/VqFm1.jpg?s=328&g=1“-O image.png
$wgethttp://evanw.github.io/glfx.js/glfx.js
$head-6 demo.html
glfx
$python-m SimpleHTTPServer

最后，打开web浏览器并键入“localhost:8000/demo.html”

别忘了按“提交”：-

我在和一位同事谈话，他能帮我找到更直接的解决方案。对于任何感兴趣的人来说，这涉及到使用类。以下是经过清理的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);
};

所以知道我只需要一次绘制和更新所有效果是很有帮助的。然而，我无法让它运行。我按下复选标记，然后单击“提交”，什么也没发生。@JoeBates我已经添加了在Ubuntu上运行它的说明。

 /*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);
};