Home>

We will create a function like color correction in Photoshop in the future.
If i am looking for a site that you can use as a reference because I want to incorporate it into the site
I found a good one and wrote a code based on the verification data there
I tried to see it, but there are some mysterious points and that part
I would appreciate if you could just tell me.
It is the corresponding part, but of var changeBrightness of javascript file
Var diff = brightnessBar.value-cBrigtness;located in the second line
There is a formula, and I wonder why the same things are subtracted from each other.
Link content

Code 
<canvas width="493" height="215"></canvas>

<ul>
<li>
  <input type="range" min="0" max="255" value="125">
</li>
</ul>
Code
var canvas = document.querySelector("#myCanvas");
var context = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
var image = new Image();
image.src = "/labo/html5/canvas/images/001.jpg";
image.onload = function(){initCanvas};
var brightnessBar = document.querySelector("#brightnessBar");
var cBrigtness = brightnessBar.value;
// initialize canvas.
var initCanvas = function() {
     context.drawImage(image, 0, 0);
     brightnessBar.value = 125;
}
var changeBrightness = function() {
     var diff = brightnessBar.value-cBrigtness;
     if (diff == 0) {
          return;
     }
     cBrigtness = brightnessBar.value;
     var pixels = context.getImageData(0, 0, width, height);
     var d = pixels.data;
     for (var i = 0;i<d.length;i+=4) {
          if (i === 0) {
               console.log("r,g,b,a = "+ d[i] + "," + d[i+1] + "," + d[i+2] + "," + d[i+ 3]);
          }
          d[i] += diff;// r
          d[i+1] += diff;// g
          d[i+2] += diff;// b
     }
     context.putImageData(pixels, 0, 0);
}
window.addEventListener("load", function() {
     initCanvas();
     brightnessBar.onchange = changeBrightness;
     document.querySelector("#reset").onclick = initCanvas;
}, false);
  • Answer # 1

    Written on the top

    var cBrigtness = brightnessBar.value;


    I think it is misunderstood. This is executed once when JavaScript is loaded,cBrightnessTobrightnessBar.valueSubstitute (=125). It's the initial value. This 125 is HTML

    <input id="brightnessBar" type="range" min="0" max="255" value="125">


    It comes from.

    now,cBrightness = 125, brightnessBar.value = 125is.

    When you move the slider (eg, make the value 200),cBrightness = 125, brightnessBar.value = 200BecomechangeBrightnessWill start. (Because under JSbrightnessBar.onchange = changeBrightness;Because it is written)

    Then

    var diff = brightnessBar.value-cBrigtness;/* diff = 200-125 */
    if (diff == 0) {
         return;
    } //Do nothing if the slider is not moving
    cBrigtness = brightnessBar.value;// save the current value in case the next slider moves

    Will be. brightnessBar.value and cBrigtness are not the same thing.

    Addendum

    I wrote at the beginningcBrightnessRegarding the initialization of, the origin of brightnessBar.value` (=125) is

    image.onload = function(){initCanvas};

    soinitCanvasI think it is accurate because I am calling. It's not the main story, but for the time being.