JSFiddle - React, Tailwind, and code Playground

by ninty9notout

HTML

<p><label>Upload image: <input type="file" id="upload-field"/></label></p>
<p id="filters">
    <label><button id="reset">Reset</button></label>
</p>
<canvas id="canvas"></canvas>

CSS

canvas { width: 100%; height: auto; }

#filters { display: none; }

JavaScript

var App = {
    canvas: document.getElementById("canvas"),
    context: null,
    original: null,
    working: null,
    filterFields: document.getElementById("filters"),
    uploadField: document.getElementById("upload-field"),
    appliedFilters: {}
}

App.getData = function() {
    return this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);
}

App.setData = function(data) {
    return this.context.putImageData(data, 0, 0);
}

App.reset = function() {
    this.setData(this.original);
}

App.init = function() {
    var that = this;
    
    this.uploadField.addEventListener("change", function(event) {
        var reader = new FileReader();
        
        reader.onload = function(evt) {
            var img = new Image();
            img.onload = function() {
                that.canvas.width = img.width;
                that.canvas.height = img.height;
                that.context.drawImage(img, 0, 0);
                
                that.original = that.working = that.getData();
            }
            img.src = evt.target.result;
        }
        reader.readAsDataURL(event.target.files[0]);
        
       that.filters.forEach(function(f) {
           var
               label = document.createElement("label"),
               checkbox = document.createElement("input");
           
           checkbox.type = "checkbox";
           checkbox.onchange = function() {
               if(this.checked) {
                   App.appliedFilters[f.name] = App.working;
                   App.transform(f.fn);
               } else {
                   App.undo(f.name);
               }
           }
           
           label.appendChild(checkbox);
           label.appendChild(document.createTextNode(f.name));
           
           that.filterFields.appendChild(label);
       });
        
        that.filterFields.style.display = "block";
    }, false);
    
    this.context = this.canvas.getContext("2d");
    
   ...