JSFiddle - React, Tailwind, and code Playground

by slapec

HTML

<body>
    <canvas id='canvas' width='512' height='512'></canvas>
    <div id='controlls' style='display: inline-block'>
        <form id='gammaForm'>
            <label for='red'>Piros</label>
            <input type='range' value='1.0' min='0.2' max='5.0' step='0.1'
            id='red' name='red'></input>
            <output for='red' name='red_out'>1</output>
            <br>
            <label for='green'>Zöld</label>
            <input type='range' value='1.0' min='0.2' max='5.0' step='0.1'
            id='green' name='green'></input>
            <output for='green' name='green_out'>1</output>
            <br>
            <label for='blue'>Kék</label>
            <input type='range' value='1.0' min='0.2' max='5.0' step='0.1'
            id='blue' name='blue'></input>
            <output for='blue' name='blue_out'>1</output>
        </form>
        <br>
        <canvas id='plot' width='150' height='150'></canvas>
    </div>
    <img style='display: none;' id='lena'...

JavaScript

gammaApply(1, 1, 1);
gammaPlot(1, 1, 1);

form = document.getElementById('gammaForm');
form.oninput = function () {
    var g = updateOutputs(this);
    gammaApply(g.red, g.green, g.blue);
    gammaPlot(g.red, g.green, g.blue);
};


function gammaApply(gR, gG, gB) {
    var canvas, ctx, lena;
    var i, len, px, imgArray, imgData;

    var lut_r = [],
        lut_g = [],
        lut_b = [];

    lena = document.getElementById('lena');

    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');
    ctx.drawImage(lena, 0, 0);

    imgData = ctx.getImageData(0, 0, 512, 512);
    imgArray = imgData.data;
    len = imgData.width * imgData.height * 4;

    for (i = 0; i < 256; i++) {
        lut_r[i] = gammaCalc(i, gR);
        lut_g[i] = gammaCalc(i, gG);
        lut_b[i] = gammaCalc(i, gB);
    }

    for (i = 0; i < len; i += 4) {
        imgArray[i] = lut_r[imgArray[i]];
        imgArray[i + 1] = lut_g[imgArray[i + 1]];
        imgArray[i + 2] = lut_b[imgArray[i + 2]];
    }

    ctx.putImageData(imgData, 0, 0);
}

function updateOutputs(form) {
    var gR = form.red.valueAsNumber,
        gG = form.green.valueAsNumber,
        gB = form.blue.valueAsNumber;

    form.red_out.value = gR;
    form.green_out.value = gG;
    form.blue_out.value = gB;

    return {
        'red': gR,
            'green': gG,
            'blue': gB
    };
}

function gammaCalc(px, g) {
    return parseInt(Math.pow(px / 255, 1 / g) * 255, 10);
}

function gammaPlot(r, g, b) {
    var canvas, ctx;
    var w, h, i;

    canvas = document.getElementById('plot');
    w = canvas.width;
    h = canvas.height;

    ctx = canvas.getContext('2d');

    ctx.fillStyle = '#DBDBDB';
    ctx.lineWidth = 2;
    ctx.fillRect(0, 0, w, h);

    //red
    ctx.beginPath();
    ctx.strokeStyle = '#F00';
    ctx.moveTo(0, h);
    for (i = 0; i < w; i++) {
        ctx.lineTo(i, w - (Math.pow(i / w, 1 / r) * w));
    }
    ctx.stroke();
    ctx.closePath();

    //green
   ...