Image editer

<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Image editor</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">

</head>
<body>

<div class="container">
  <div class="row">
	<h1> Image editer </h1>

<div class="col-xs-12 col-md-6 ">
      <div>
	      <h2>Start here:  Choose an image </h2>
        <canvas id="mainImgCanvas"></canvas>
        <input type="file" multiple="false" accept="image/*" id="fileInput" onchange="upload()" />
      </div>
    </div>

<div class="col-xs-12 col-md-6 ">
        <div>
		       <h2> Blak & white mode</h2>
          <canvas id="toGrayCanvas"></canvas>
          <button id="makeGrayButton" onclick="makeGray()">Display In Graysclae Mode</button>
        </div>
      </div>

<div class="col-xs-12 col-md-6 ">
        <div>
		      <h2> Add a frame </h2>
          <canvas id="addFrameCanvas"></canvas>
          <input type="range" min ="10" max="100" value="10" id="rangeInput" oninput="addFrame()">Add Frame
        </div>
      </div>

<div class="col-xs-12 col-md-6 ">
        <div>
		      <h2> Change background </h2>
          
          <canvas id="bgImgCanvas"></canvas>
          <div class="row">
            <div class="col-xs-6">
              1- Uploade background image:
              <span class="warning">Choose a bigger picture than the original one</span>
              <input id="bgImgInput" type="file" multiple="false" accept="image/*" onchange="bgUpload()" />
            </div>
            <div class="col-xs-6">
            <button id="changeBackgroundButton" class="pull right" onclick="bgChanger()"> 2- Change background </button>
            </div>
            
          </div>
           </div>
      </div>

<div class="col-xs-12 col-md-6 ">
        <div>
		      <h2> Red Filter</h2>
          <canvas id="redFilterCanvas"></canvas>
          <button id="redFilterButton" onclick="redFilter()"> red theme </button>
        </div>
      </div>

<div class="col-xs-12 col-md-6 ">
        <div>
		      <h2> Rainbow filter </h2>
          <canvas id="rainbowFilterCanvas"></canvas>
           <button id="rainbowFilterButton" onclick="rainbowFilter()"> Rainbow theme </button>
        </div>
      </div>

<div class="col-xs-12 col-md-6 ">
        <div>
		      <h2> Blur filter </h2>
          <canvas id="blurFilterCanvas"></canvas>
           <button id="blurFilterButton" onclick="blurFilter()"> Blur theme </button>
        </div>
      </div>

<div class="col-xs-12 col-md-6 ">
        <div>
		      <h2> No white filter </h2>
          <canvas id="noWhiteFilterCanvas"></canvas>
           <button id="noWhiteFilterButton" onclick="noWhiteFilter()"> No white theme </button>
        </div>
      </div>

      <div class="col-xs-12 col-md-6 ">
        <div>
		      <h2> Others </h2>
          <canvas id="...Canvas"></canvas>
           <button id="...Button" onclick="alert('Not implemented yet!')"> ... theme </button>
        </div>
      </div>
  </div>
</div>

<script>
 /* SimpleImage library */
// Copyright 2015 Owen Astrachan, Drew Hilton, Susan Rodger, Robert Duvall
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//    http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

// Created by Nick Parlante
// Updated by Robert Duvall

// Represents one pixel in a SimpleImage, supports rgb get/set.
SimplePixel = function (simple_image, x, y) {
    __SimpleImageUtilities.funCheck('SimplePixel', 3, arguments.length);
    this.container = simple_image;
    this.x = x;
    this.y = y;
};

SimplePixel.prototype = {
    constructor: SimplePixel,
    getX: function () {
        __SimpleImageUtilities.funCheck('getX', 0, arguments.length);
        return this.x;
    },
    getY: function () {
        __SimpleImageUtilities.funCheck('getY', 0, arguments.length);
        return this.y;
    },
    getRed: function () {
        __SimpleImageUtilities.funCheck('getRed', 0, arguments.length);
        return this.container.getRed(this.x, this.y);
    },
    getGreen: function () {
        __SimpleImageUtilities.funCheck('getGreen', 0, arguments.length);
        return this.container.getGreen(this.x, this.y);
    },
    getBlue: function () {
        __SimpleImageUtilities.funCheck('getBlue', 0, arguments.length);
        return this.container.getBlue(this.x, this.y);
    },
    getAlpha: function () {
        __SimpleImageUtilities.funCheck('getAlpha', 0, arguments.length);
        return this.container.getAlpha(this.x, this.y);
    },
    setRed: function (val) {
        __SimpleImageUtilities.funCheck('setRed', 1, arguments.length);
        this.container.setRed(this.x, this.y, val);
    },
    setGreen: function (val) {
        __SimpleImageUtilities.funCheck('setGreen', 1, arguments.length);
        this.container.setGreen(this.x, this.y, val);
    },
    setBlue: function (val) {
        __SimpleImageUtilities.funCheck('setBlue', 1, arguments.length);
        this.container.setBlue(this.x, this.y, val);
    },
    setAlpha: function (val) {
        __SimpleImageUtilities.funCheck('setAlpha', 1, arguments.length);
        this.container.setAlpha(this.x, this.y, val);
    },
    setAllFrom: function (pixel) {
        __SimpleImageUtilities.funCheck('setAllFrom', 1, arguments.length);
        this.setRed(pixel.getRed());
        this.setGreen(pixel.getGreen());
        this.setBlue(pixel.getBlue());
        this.setAlpha(pixel.getAlpha());
    },
    toString: function () {
        return 'r:' + this.getRed() + ' g:' + this.getGreen() + ' b:' + this.getBlue();
    },
    // Render pixel as string
    getString: function () {
        return this.toString();
    }
};

// Note there is an Image built in, so don't use that name.
// A SimpleImage can be created with a url, size, or an existing htmlImage or canvas
SimpleImage = function () {
    if (arguments.length < 0 || arguments.length > 2) {
        __SimpleImageUtilities.funCheck('SimpleImage', 1, arguments.length);
        return null;
    }
    // function map for to support "overloaded constructor"
    var funMap = [
        function () {
            return __SimpleImageUtilities.EMPTY_IMAGE;
        },
        function (source) {
            if (source instanceof HTMLImageElement) {
                return source;
            } else if (typeof source == 'string') {
                return __SimpleImageUtilities.makeHTMLImageFromURL(source, this);
            } else if (source instanceof HTMLInputElement && source.type == 'file') {
                return __SimpleImageUtilities.makeHTMLImageFromInput(source.files[0], this);
            } else if (source instanceof SimpleImage) {
                return source.canvas;
            } else if (source instanceof HTMLCanvasElement) {
                return source;
            } else {
                __SimpleImageUtilities.throwError('Unrecognized value used to create a SimpleImage: ' + source);
            }
        },
        function (width, height) {
            if (width > 0 && height > 0) {
                return __SimpleImageUtilities.makeHTMLImageFromSize(width, height);
            } else {
                __SimpleImageUtilities.throwError('Unable to create a SimpleImage with a negative width or height [' + width + 'x' + height + ']');
            }
        }
    ];

// call appropriate constructor
    var htmlImage = funMap[arguments.length].apply(this, arguments);
    // actual content is backed by an invisible canvas
    this.canvas = __SimpleImageUtilities.makeHTMLCanvas('SimpleImageCanvas');
    this.canvas.style.display = 'none';
    this.context = this.canvas.getContext('2d');
    // when image is loaded, it will fill this in
    this.imageData = null;
    // check to see if we can complete the constructor now instead of waiting
    if (htmlImage != null && (htmlImage instanceof HTMLCanvasElement || htmlImage.complete)) {
        this.__init(htmlImage);
    }
    this.ACCEPTED_FILES = 'image.*';
}

SimpleImage.prototype = {
    constructor: SimpleImage,
    complete: function () {
        return this.imageData != null;
    },
    getWidth: function () {
        __SimpleImageUtilities.funCheck('getWidth', 0, arguments.length);
        return this.width;
    },
    getHeight: function () {
        __SimpleImageUtilities.funCheck('getHeight', 0, arguments.length);
        return this.height;
    },
    getRed: function (x, y) {
        __SimpleImageUtilities.funCheck('getRed', 2, arguments.length);
        return this.imageData.data[this.__getIndex('getRed', x, y)];
    },
    getGreen: function (x, y) {
        __SimpleImageUtilities.funCheck('getGreen', 2, arguments.length);
        return this.imageData.data[this.__getIndex('getGreen', x, y) + 1];
    },
    getBlue: function (x, y) {
        __SimpleImageUtilities.funCheck('getBlue', 2, arguments.length);
        return this.imageData.data[this.__getIndex('getBlue', x, y) + 2];
    },
    getAlpha: function (x, y) {
        __SimpleImageUtilities.funCheck('getAlpha', 2, arguments.length);
        return this.imageData.data[this.__getIndex('getAlpha', x, y) + 3];
    },
    // Changes to the pixel write back to the image.
    getPixel: function (x, y) {
        __SimpleImageUtilities.funCheck('getPixel', 2, arguments.length);
        __SimpleImageUtilities.rangeCheck(x, 0, this.getWidth(), 'getPixel', 'x', 'wide');
        __SimpleImageUtilities.rangeCheck(y, 0, this.getHeight(), 'getPixel', 'y', 'tall');
        return new SimplePixel(this, x, y);
    },

setRed: function (x, y, value) {
        __SimpleImageUtilities.funCheck('setRed', 3, arguments.length);
        this.imageData.data[this.__getIndex('getRed', x, y)] = __SimpleImageUtilities.clamp(value);
    },
    setGreen: function (x, y, value) {
        __SimpleImageUtilities.funCheck('setGreen', 3, arguments.length);
        this.imageData.data[this.__getIndex('getGreen', x, y) + 1] = __SimpleImageUtilities.clamp(value);
    },
    setBlue: function (x, y, value) {
        __SimpleImageUtilities.funCheck('setBlue', 3, arguments.length);
        this.imageData.data[this.__getIndex('getBlue', x, y) + 2] = __SimpleImageUtilities.clamp(value);
    },
    setAlpha: function (x, y, value) {
        __SimpleImageUtilities.funCheck('setAlpha', 3, arguments.length);
        this.imageData.data[this.__getIndex('getAlpha', x, y) + 3] = __SimpleImageUtilities.clamp(value);
    },
    setPixel: function (x, y, pixel) {
        __SimpleImageUtilities.funCheck('setPixel', 3, arguments.length);
        __SimpleImageUtilities.rangeCheck(x, 0, this.getWidth(), 'setPixel', 'x', 'wide');
        __SimpleImageUtilities.rangeCheck(y, 0, this.getHeight(), 'setPixel', 'y', 'tall');
        this.setRed(x, y, pixel.getRed());
        this.setBlue(x, y, pixel.getBlue());
        this.setGreen(x, y, pixel.getGreen());
        this.setAlpha(x, y, pixel.getAlpha());
    },
    // Scales contents of SimpleIage to the given size
    setSize: function (width, height) {
        __SimpleImageUtilities.funCheck('setSize', 2, arguments.length);
        width = Math.floor(width);
        height = Math.floor(height);
        if (width > 0 && height > 0) {
            // make sure we have the most current changes
            __SimpleImageUtilities.flush(this.context, this.imageData);
            this.imageData = __SimpleImageUtilities.changeSize(this.canvas, width, height);
            this.width = width;
            this.height = height;
            this.canvas.width = width;
            this.canvas.height = height;
        }
        else {
            __SimpleImageUtilities.throwError('You tried to set the size of a SimpleImage to a negative width or height [' + width + 'x' + height + ']');
        }
    },
    // Draws to the given canvas, setting its size to match SimpleImage's size
    drawTo: function (toCanvas) {
        if (this.imageData != null) {
            __SimpleImageUtilities.flush(this.context, this.imageData);
            toCanvas.width = this.getWidth();
            toCanvas.height = this.getHeight();
            toCanvas.getContext('2d').drawImage(this.canvas, 0, 0, toCanvas.width, toCanvas.height);
        }
        else {
            var myself = this;
            setTimeout(function() {
                myself.drawTo(toCanvas);
            }, 100);
        }
    },
    // Export an image as an linear array of pixels that can be iterated over
    toArray: function () {
        __SimpleImageUtilities.funCheck('toArray', 0, arguments.length);
        var array = new Array();
        // nip 2012-7
        // 1. simple-way (this is as good or faster in various browser tests)
        // var array = new Array(this.getWidth() * this.getHeight());
        // 2. change to cache-friendly y/x ordering
        // Non-firefox browsers may benefit
        for (var y = 0; y < this.getHeight(); y++) {
            for (var x = 0; x < this.getWidth(); x++) {
                  //array[i++] = new SimplePixel(this, x, y);  // 2.
                  array.push(new SimplePixel(this, x, y));  // 1.
            }
        }
        return array;
    },
    // Support iterator within for loops (eventually)
    values: function() {
        __SimpleImageUtilities.funCheck('values', 0, arguments.length);
        return this.toArray();
    },
    // Better name than values if we have to use it
    pixels: function() {
        return this.values();
    },

// Private methods: should not be called publicly, but it should not hurt if it is
    // Completes the construction of this object once the htmlImage is loaded
    __init: function (img) {
        try {
            this.id = img.id;
            // this is a hack to make three different cases work together:
            // - small empty image, thumbnail images, and canvases
            this.width = ('naturalWidth' in img) ? Math.max(img.naturalWidth, img.width) : img.width;
            this.height = ('naturalHeight' in img) ? Math.max(img.naturalHeight, img.height) : img.height;
            this.canvas.width = this.width;
            this.canvas.height = this.height;
            // are we copying an already loaded image or drawing it fresh
            if (img instanceof HTMLCanvasElement) {
                var canvasData = img.getContext('2d').getImageData(0, 0, this.width, this.height);
                this.context.putImageData(canvasData, 0, 0);
            }
            else {
                this.context.drawImage(img, 0, 0, this.width, this.height);
            }
            this.imageData = this.context.getImageData(0, 0, this.width, this.height);
        }
        catch (err) {
            console.log(err);
            __SimpleImageUtilities.throwError('The name you used to create a SimpleImage was not correct: ' + img.id);
        }
    },
    // computes index into 1-d array, and checks correctness of x,y values
    __getIndex: function (funName, x, y) {
        __SimpleImageUtilities.rangeCheck(x, 0, this.getWidth(), funName, 'x', 'wide');
        __SimpleImageUtilities.rangeCheck(y, 0, this.getHeight(), funName, 'y', 'tall');
        return (Math.floor(x) + Math.floor(y) * this.getWidth()) * 4;
    }
};

// Private helper functions, add __ to reduce chance they will conflict with anyone else's method names
var __SimpleImageUtilities = (function () {
    // private globals
    // image needed to seed "sized" image
    var EMPTY_IMAGE_DATA = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAQAAAAnZu5uAAAAAXNSR0IArs4c6QAAABVJREFUeJxiYPgPhyQwAQAAAP//AwCgshjoJhZxhgAAAABJRU5ErkJggg==';
    // number of canvases created to hold images
    var globalCanvasCount = 0;
    // load image by wrapping it in an HTML element
    function makeHTMLImage (url, name, simpleImage, loadFunc) {
        if (loadFunc == null) {
            loadFunc = function() {
                simpleImage.__init(this);
                console.log('loaded image: ' + simpleImage.id);
            }
        }
        var img = new Image();
        img.onload = loadFunc;
        img.src = url;
        img.id = name;
        img.style.display = 'none';
        return img;
    }

// public utility functions
    return {
        // make a blank image so it is cached for future uses
        EMPTY_IMAGE: makeHTMLImage(EMPTY_IMAGE_DATA, 'EMPTY', null, function () {}),

// create a canvas element
        makeHTMLCanvas: function (prefix) {
            var canvas = document.createElement('canvas');
            canvas.id = prefix + globalCanvasCount;
            canvas.style.display = 'none';
            canvas.innerHTML = 'Your browser does not support HTML5.'
            globalCanvasCount++;
            return canvas;
        },

// get image from uploaded file input
        makeHTMLImageFromInput: function (file, simpleImage) {
            console.log('creating image: ' + file.name);
            var reader = new FileReader();
            reader.onload = function() {
                makeHTMLImage(this.result, file.name.substr(file.name.lastIndexOf('/') + 1), simpleImage);
            }
            reader.readAsDataURL(file);
            return null;
        },

// get image from a relative URL
        makeHTMLImageFromURL: function (url, simpleImage) {
            var name = url.substr(0, url.indexOf(';'));
            console.log('creating image: ' + name);
            if (url.substr(0, 4) != 'http') {
                return makeHTMLImage(url, name, simpleImage);
            }
            else {
                // does not work --- loading image from URL taints the canvas so we cannot use it :(
                __SimpleImageUtilities.throwError('Unfortunately you cannot create a SimpleImage directly from a URL: ' + url);
            }
        },

// create an empty image of the given size
        makeHTMLImageFromSize: function (width, height) {
            console.log('creating image: ' + width + 'x' + height);
            var img = __SimpleImageUtilities.EMPTY_IMAGE.cloneNode(true);
            img.width = width;
            img.height = height;
            return img;
        },

// set size of the image to the given values, scaling the pixels
        changeSize: function (canvasOld, newWidth, newHeight) {
            var canvasNew = __SimpleImageUtilities.makeHTMLCanvas('setSize_');
            canvasNew.width = newWidth;
            canvasNew.height = newHeight;
            // draw old canvas to new canvas
            var contextNew = canvasNew.getContext('2d');
            contextNew.drawImage(canvasOld, 0, 0, newWidth, newHeight);
            return contextNew.getImageData(0, 0, newWidth, newHeight);
        },

// clamp values to be in the range 0..255
        clamp: function (value) {
            return Math.max(0, Math.min(Math.floor(value), 255));
        },

// push accumulated local changes out to the screen
        flush: function (context, imageData) {
            if (imageData != null) {
                context.putImageData(imageData, 0, 0, 0, 0, imageData.width, imageData.height);
            }
        },

// call this to abort with a message
        throwError: function (message) {
            throw new Error(message);
        },

// called from user-facing functions to check number of arguments
        funCheck: function (funcName, expectedLen, actualLen) {
            if (expectedLen != actualLen) {
                var s1 = (actualLen == 1) ? '' : 's';  // pluralize correctly
                var s2 = (expectedLen == 1) ? '' : 's';
                var message = 'You tried to call ' + funcName + ' with ' + actualLen + ' value' + s1 +
                              ', but it expects ' + expectedLen + ' value' + s2 + '.';
                // someday: think about "values" vs. "arguments" here
                __SimpleImageUtilities.throwError(message);
            }
        },

// called from user-facing functions to check if given value is valid
        rangeCheck: function (value, low, high, funName, coordName, size) {
            if (value < low || value >= high) {
                var message = 'You tried to call ' + funName + ' for a pixel with ' + coordName + '-coordinate of ' + value +
                              ' in an image that is only ' + high + ' pixels ' + size +
                              ' (valid ' + coordName + ' coordinates are ' + low + ' to ' + (high-1) + ').';
                __SimpleImageUtilities.throwError(message);
            }
        }
    };
})();
</script>

  <script>
  
/*  My code  */

// Global variables
 var img;
 var bgImg;
 // upload
 function upload() {
   var mainImgCanvas = document.getElementById('mainImgCanvas');
   var fileInput = document.getElementById('fileInput');
   img = new SimpleImage(fileInput);
   img.drawTo(mainImgCanvas);
   return img;
 }

// bgUpload
 function bgUpload() {
   var bgImgCanvas = document.getElementById('bgImgCanvas');
   var bgImgInput = document.getElementById('bgImgInput');
   bgImg = new SimpleImage(bgImgInput);
   bgImg.drawTo(bgImgCanvas);
 }

// makeGray
 function makeGray() {
   // canvas
   var toGrayCanvas = document.getElementById('toGrayCanvas');
   // new instance of img
   var toGrayImg = new SimpleImage(img);
   for (var px of toGrayImg.values()) {
     // setting average color value
     var avg = (px.getRed() + px.getGreen() + px.getBlue()) / 3;
     // settting all to avg
     px.setRed(avg);
     px.setGreen(avg);
     px.setBlue(avg);
   }
   toGrayImg.drawTo(toGrayCanvas);
 };
 // Add frame
 function addFrame(thickness) {
   var addFrameCanvas = document.getElementById('addFrameCanvas');
   var toFrameImg = new SimpleImage(img);
   var rangeInput = document.getElementById('rangeInput');

thickness = rangeInput.value;

for (var px of toFrameImg.values()) {
     // getting the width and the height of the toFrameImg..
     var width = toFrameImg.getWidth();
     var height = toFrameImg.getHeight();
     // getting the X and Y of pixels
     var x = px.getX();
     var y = px.getY();

// borders logic:
     if (x < thickness || x > width - thickness || y < thickness || y > height - thickness) {
       px.setRed(0);
       px.setGreen(0);
       px.setBlue(0);
     }
   }
   toFrameImg.drawTo(addFrameCanvas);
 };

// Change background
 function bgChanger() {
   // new instance of the img 
   var fgImg = new SimpleImage(img);
   // getting the canvas and the context
   var bgImgCanvas = document.getElementById('bgImgCanvas');
   var bgImgCanvasCtx = bgImgCanvas.getContext('2d');
   // check image is uploaded
   if (bgImg == null || !bgImg.complete()) {
     alert('background image couldn!t be louded');
     retutn;
   }
   for (var px of fgImg.values()) {
     var x = px.getX();
     var y = px.getY();
     // getting background image pixels
     var bgPixel = bgImg.getPixel(x, y);
     // setting a green vlaue
     var greenValue = px.getRed() + px.getBlue();
     // logic: if green is more than my green vlaue then swap every px from img with bgImg px
     if (px.getGreen() >= greenValue) {
       fgImg.setPixel(x, y, bgPixel);
     } else { // otherwise set it to ts original.
       fgImg.setPixel(x, y, px);
     }
   }
   // clearing bgImgCanvas
   bgImgCanvasCtx.clearRect(0, 0, bgImgCanvas.width, bgImgCanvas.height);
   // drawing the new img
   fgImg.drawTo(bgImgCanvas);
 }

// red filter
 function redFilter() {
   // new instance of the img 
   var redImg = new SimpleImage(img);
   // canvas 
   var redFilterCanvas = document.getElementById('redFilterCanvas');
   // logic:
   for (var px of redImg.values()) {
     var avg = px.getRed() + px.getGreen() + px.getBlue() / 3;
     if (avg <= 128) {
       px.setRed(2 * avg);
       px.setGreen(0);
       px.setBlue(0);
     } else {
       px.setRed(255);
       px.setGreen(2 * avg - 255);
       px.setBlue(2 * avg - 255);
     }
   }
   redImg.drawTo(redFilterCanvas);
 }

// blur filter
 function blurFilter() {
   // new instance of the img 
   var blurImg = new SimpleImage(img);
   // canvas 
   var blurFilterCanvas = document.getElementById('blurFilterCanvas');
   // logic:
   for (var px of blurImg.values()) {
     var imgWidth = blurImg.getWidth();
     var imgHeight = blurImg.getHeight();
     var x = px.getX();
     var y = px.getY();

if (x > 20 && x < imgWidth - 20) {
       blurImg.setPixel(x + 4, y, px);
     }
     if (y > 20 && y < imgHeight - 20) {
       blurImg.setPixel(x, y + 2, px);
     }
   }
   blurImg.drawTo(blurFilterCanvas);
 }

// Others
 function othersFilter() {

}

// Rainbow::: ////////////// :::

// Rainbow filter
function rainbowFilter(){
  // new instance of the img 
	var rainbowImg = new SimpleImage(img);
  // canvas 
	var rainbowFilterCanvas = document.getElementById('rainbowFilterCanvas');
  // logic:
  for(var px of rainbowImg.values()){
    var avg = px.getRed() + px.getGreen() + px.getBlue() /3;
    var height = rainbowImg.getHeight();
    var y = px.getY();

// make 7 srtipes
    var stripe1 = height / 7;
    var stripe2 = 2 * stripe1;
    var stripe3 = 3 * stripe1;
    var stripe4 = 4 * stripe1;
    var stripe5 = 5 * stripe1;
    var stripe6 = 6 * stripe1;
    var stripe7 = 7 * stripe1;
    // stripe no 1
    if (y < stripe1){ 
      // make red
       if (avg <= 128){
          px.setRed(2 * avg);
          px.setGreen(0);
          px.setBlue(0);
        } else {
          px.setRed(255);
          px.setGreen(2 * avg - 255);
          px.setBlue(2 * avg - 255);
        }
    }

// stripe no 2
    if (y > stripe1 && y < stripe2){ 
      // make orange
       if (avg <= 128){
          px.setRed(2 * avg);
          px.setGreen(0.8 * avg);
          px.setBlue(0);
        } else {
          px.setRed(255);
          px.setGreen(1.2* avg - 51);
          px.setBlue(2 * avg - 255);
        }
    }

// stripe no 3
    if (y > stripe2 && y < stripe3){ 
      // make  yellow
       if (avg <= 128){
          px.setRed(2 * avg);
          px.setGreen(2 * avg);
          px.setBlue(0);
        } else {
          px.setRed(255);
          px.setGreen(255);
          px.setBlue(2 * avg - 255);
        }
    }

// stripe no 4
    if (y > stripe3 && y < stripe4){ 
      // make green
       if (avg <= 128){
          px.setRed(0);
          px.setGreen(2 * avg);
          px.setBlue(0);
        } else {
          px.setRed(2 * avg - 255);
          px.setGreen(255);
          px.setBlue(2 * avg - 255);
        }
    }

// stripe no 5
    if (y > stripe4 && y < stripe5){ 
      // make blue
       if (avg <= 128){
          px.setRed(0);
          px.setGreen(0);
          px.setBlue(2 * avg);
        } else {
          px.setRed(2 * avg - 255);
          px.setGreen(2 * avg - 255);
          px.setBlue(255);
        }
    }

// stripe no 6
    if (y > stripe5 && y < stripe6){ 
      // make  indigo
       if (avg <= 128){
          px.setRed(0.8 * avg);
          px.setGreen(0);
          px.setBlue(2 * avg);
        } else {
          px.setRed(1.2 * avg - 51);
          px.setGreen(2 * avg - 255);
          px.setBlue(255);
        }
    }

// stripe no 7
    if (y > stripe6 && y < stripe7){ 
      // make  violet
       if (avg <= 128){
          px.setRed(1.6 * avg);
          px.setGreen(0);
          px.setBlue(1.6 * avg);
        } else {
          px.setRed(0.4 * avg + 153);
          px.setGreen(2 * avg - 255);
          px.setBlue(0.4 * avg + 153);
        }
    }
       
  } // end for loop
  rainbowImg.drawTo(rainbowFilterCanvas);
}

// no white filter
 function noWhiteFilter() {
   // new instance of the img 
   var noWhiteImg = new SimpleImage(img);
   // canvas 
   var noWhiteFilterCanvas = document.getElementById('noWhiteFilterCanvas');
   // logic:
   for (var px of noWhiteImg.values()) {
     var avg = px.getRed() + px.getGreen() + px.getBlue() / 3;
     if (avg <= 128) {
       px.setRed(2 * avg);
       px.setGreen(0);
       px.setBlue(0);
     } else {
       px.setRed(255);
       px.setGreen(2 * avg - 255);
       px.setBlue(2 * avg - 255);
     }
   }
   noWhiteImg.drawTo(noWhiteFilterCanvas);
 }  
  
  </script>

</body>

<style>

.container{
	margin-top:20px;
}
h1{
	/* text-align: center;*/ 
  color: black;
}
canvas{
  width: 400px;
  height: auto;
  border: 1px solid lime;
  margin-bottom: 5px;
  display: inline-block;
}
.warning {
  color: orange;
}
</style>
</html>

demo

Code Preview

Popular Posts

Pages

Image editer