JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<div id="container" class="container">

            <canvas id="source" width="1000" height="600"></canvas>

            <div class="actions">

                <div id="next" class="button">Next image</div>

                <div id="sepia" class="button">Apply HDR Effect</div>

            </div>

        </div>

CSS

*{
    margin:0;
    padding:0;
}
body {
    background-color:#EEEEEE;
    color:#fff;
    font:14px/1.3 Arial,sans-serif;
}
header {
    background-color:#212121;
    box-shadow: 0 -1px 2px #111111;
    display:block;
    height:70px;
    position:relative;
    width:100%;
    z-index:100;
}
header h2{
    font-size:22px;
    font-weight:normal;
    left:50%;
    margin-left:-400px;
    padding:22px 0;
    position:absolute;
    width:540px;
}
header a.stuts,a.stuts:visited {
    border:none;
    text-decoration:none;
    color:#fcfcfc;
    font-size:14px;
    left:50%;
    line-height:31px;
    margin:23px 0 0 110px;
    position:absolute;
    top:0;
}
header .stuts span {
    font-size:22px;
    font-weight:bold;
    margin-left:5px;
}
.container {
    margin: 20px auto;
    position: relative;
    width: 1000px;
}
.actions {
    left: 10px;
    position: absolute;
    top: 10px;
    z-index: 2;
}
.button {
    background-color: #d7e5f5;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d7e5f5), color-stop(100%, #cbe0f5));
    background-image: -webkit-linear-gradient(top, #d7e5f5, #cbe0f5);
    background-image: -moz-linear-gradient(top, #d7e5f5, #cbe0f5);
    background-image: -ms-linear-gradient(top, #d7e5f5, #cbe0f5);
    background-image: -o-linear-gradient(top, #d7e5f5, #cbe0f5);
    background-image: linear-gradient(top, #d7e5f5, #cbe0f5);
    border-top: 1px solid #abbbcc;
    border-left: 1px solid #a7b6c7;
    border-bottom: 1px solid #a1afbf;
    border-right: 1px solid #a7b6c7;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -webkit-box-shadow: inset 0 1px 0 0 white;
    -moz-box-shadow: inset 0 1px 0 0 white;
    box-shadow: inset 0 1px 0 0 white;
    color: #1a3e66;
    font: normal 11px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
    line-height: 1;
    margin-bottom: 5px;
    padding: 6px 0 7px 0;
    text-align: center;
   ...

JavaScript

// variables
var canvas, ctx;
var imgObj;

function changeSinContrast(par) {
    var dPow = 4;
    var iMid = 128;

    if (par > 0 && par < iMid) {
        par = Math.sin( Math.PI * ((90-(par/dPow)) / 180)) * par;
    } else if (par >= iMid) {
        par = Math.sin( Math.PI * ((90-((256-par))/dPow)/180) ) * par;
    }
    return par;
}

function processHrdEffect() {
    // get current image data
    var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);

    var iMid = 128;
    var dPow = 3;

    for (var i=0; i < imageData.data.length; i+=4) {
        imageData.data[i+0] = changeSinContrast(imageData.data[i+0]);
        imageData.data[i+1] = changeSinContrast(imageData.data[i+1]);
        imageData.data[i+2] = changeSinContrast(imageData.data[i+2]);
    }

    // put image data back to context
    ctx.putImageData(imageData, 0, 0);
};

$(function () {

    // create canvas and context objects
    canvas = document.getElementById('source');
    ctx = canvas.getContext('2d');

    // load source image
    imgObj = new Image();
    imgObj.onload = function () {

        // draw image
        ctx.drawImage(this, 0, 0, this.width, this.height, 0, 0, canvas.width, canvas.height);
    }
    imgObj.src = 'http://public-domain-photos.com/free-stock-photos-1-big/landscapes/sky/sunset-6.jpg';

    // different onclick handlers
    var iCur = 1;
    $('#next').click(function () {
        iCur++;
        if (iCur > 6) iCur = 1;
        imgObj.src = 'images/pic' + iCur + '.jpg';
    });
    $('#sepia').click(function () {
        processHrdEffect();
    });
    $('#toImage').click(function () {
        $('#img').attr('src', canvas.toDataURL('image/jpeg'));
    });
});