LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Filter Applier

CSS
body {
  background-color: cyan;
}
canvas {
  height: 200px;
  border: 1px solid lightgray;
  background-color: white;
}
input {
  font-size: 12pt;
}
JS
var originalImage = null;
var grayscaleImage = null;
var redImage = null;
var threeStripesImage = null;
var rainbowImage = null;
var colorImage = null;
var blurImage = null;
var canvas = null;
function upload() {
  var fileInput = document.getElementById("fileinput");
  canvas = document.getElementById("canvas");
  originalImage = new SimpleImage(fileInput);
  grayscaleImage = new SimpleImage(fileInput);
  redImage = new SimpleImage(fileInput);
  threeStripesImage = new SimpleImage(fileInput);
  rainbowImage = new SimpleImage(fileInput);
  colorImage = new SimpleImage(fileInput);
  blurImage = new SimpleImage(fileInput);
  originalImage.drawTo(canvas);
}
function doGrayscale() {
  if (imageLoaded(grayscaleImage)) {
    applyGrayscale(grayscaleImage);
    grayscaleImage.drawTo(canvas);
  }
}
function doRed() {
  if (imageLoaded(redImage)) {
    applyRed(redImage);
    redImage.drawTo(canvas);
  }
}
function doThreeStripes() {
  if (imageLoaded(threeStripesImage)) {
    applyThreeStripes(threeStripesImage);
    threeStripesImage.drawTo(canvas);
  }
}
function doRainbow() {
  if (imageLoaded(rainbowImage)) {
    applyRainbow(rainbowImage);
    rainbowImage.drawTo(canvas);
  }
}
function doColor() {
  if (imageLoaded(colorImage)) {
    var colorPicker = document.getElementById("colorpicker");
    applyColor(colorImage, colorPicker.value);
    colorImage.drawTo(canvas);
  }
}
function doBlur() {
  if (imageLoaded(blurImage)) {
    blurImage = applyBlur(blurImage);
    blurImage.drawTo(canvas);
  }
}
function resetImage() {
  if (imageLoaded(originalImage)) {
    var fileInput = document.getElementById("fileinput");
    grayscaleImage = new SimpleImage(fileInput);
    redImage = new SimpleImage(fileInput);
    threeStripesImage = new SimpleImage(fileInput);
    rainbowImage = new SimpleImage(fileInput);
    colorImage = new SimpleImage(fileInput);
    blurImage = new SimpleImage(fileInput);
    originalImage.drawTo(canvas);
  }
}
function imageLoaded(image) {
  if (image == null || !image.complete()) {
    alert("Image not loaded.")
    return false;
  }
  return true
}
function applyGrayscale(image) {
  for (var pixel of image.values()) {
    var average = (pixel.getRed()+pixel.getGreen()+pixel.getBlue()) / 3;
    pixel.setRed(average);
    pixel.setGreen(average);
    pixel.setBlue(average);
  }
}
function applyRed(image) {
  for (var pixel of image.values()) {
    var average = (pixel.getRed()+pixel.getGreen()+pixel.getBlue()) / 3;
    if (average < 128) {
      pixel.setRed(2*average);
      pixel.setGreen(0);
      pixel.setBlue(0);
    } else {
      pixel.setRed(255);
      pixel.setGreen(2*average-255);
      pixel.setBlue(2*average-255);
    }
  }
}
function applyThreeStripes(image) {
  var width = image.getWidth();
  for (var pixel of image.values()) {
    var x = pixel.getX();
    var average = (pixel.getRed()+pixel.getGreen()+pixel.getBlue()) / 3;
    if (x <= width/3) {
      if (average < 128) {
        pixel.setRed(2*average);
        pixel.setGreen(0);
        pixel.setBlue(0);
      } else {
        pixel.setRed(255);
        pixel.setGreen(2*average-255);
        pixel.setBlue(2*average-255);
      }
    } else if (x < 2*width/3) {
      if (average < 128) {
        pixel.setRed(0);
        pixel.setGreen(2*average);
        pixel.setBlue(0);
      } else {
        pixel.setRed(2*average-255);
        pixel.setGreen(255);
        pixel.setBlue(2*average-255);
      }
    } else {
      if (average < 128) {
        pixel.setRed(0);
        pixel.setGreen(0);
        pixel.setBlue(2*average);
      } else {
        pixel.setRed(2*average-255);
        pixel.setGreen(2*average-255);
        pixel.setBlue(255);
      }
    }
  }
}
function applyRainbow(image) {
  var height = image.getHeight();
  for (var pixel of image.values()) {
    var y = pixel.getY();
    var average = (pixel.getRed()+pixel.getGreen()+pixel.getBlue()) / 3;
    if (y <= height/7) {
      if (average < 128) {
        pixel.setRed(2*average);
        pixel.setGreen(0);
        pixel.setBlue(0);
      } else {
        pixel.setRed(255);
        pixel.setGreen(2*average-255);
        pixel.setBlue(2*average-255);
      }
    } else if (y <= 2*height/7) {
      if (average < 128) {
        pixel.setRed(2*average);
        pixel.setGreen(0.8*average);
        pixel.setBlue(0);
      } else {
        pixel.setRed(255);
        pixel.setGreen(1.2*average-51);
        pixel.setBlue(2*average-255);
      }
    } else if (y <= 3*height/7) {
      if (average < 128) {
        pixel.setRed(2*average);
        pixel.setGreen(2*average);
        pixel.setBlue(0);
      } else {
        pixel.setRed(255);
        pixel.setGreen(255);
        pixel.setBlue(2*average-255);
      }
    } else if (y < 4*height/7) {
      if (average < 128) {
        pixel.setRed(0);
        pixel.setGreen(2*average);
        pixel.setBlue(0);
      } else {
        pixel.setRed(2*average-255);
        pixel.setGreen(255);
        pixel.setBlue(2*average-255);
      }
    } else if (y < 5*height/7) {
      if (average < 128) {
        pixel.setRed(0);
        pixel.setGreen(0);
        pixel.setBlue(2*average);
      } else {
        pixel.setRed(2*average-255);
        pixel.setGreen(2*average-255);
        pixel.setBlue(255);
      }
    } else if (y < 6*height/7) {
      if (average < 128) {
        pixel.setRed(0.8*average);
        pixel.setGreen(0);
        pixel.setBlue(2*average);
      } else {
        pixel.setRed(1.2*average-51);
        pixel.setGreen(2*average-255);
        pixel.setBlue(255);
      }
    } else {
      if (average < 128) {
        pixel.setRed(1.6*average);
        pixel.setGreen(0);
        pixel.setBlue(1.6*average);
      } else {
        pixel.setRed(0.4*average+153);
        pixel.setGreen(2*average-255);
        pixel.setBlue(0.4*average+153);
      }
    }
  }
}
function applyColor(image, values) {
  var red = parseInt(values.substring(1,3), 16);
  var green = parseInt(values.substring(3,5), 16);
  var blue = parseInt(values.substring(5,7), 16);
  for (var pixel of image.values()) {
    var average = (pixel.getRed()+pixel.getGreen()+pixel.getBlue()) / 3;
    if (average < 128) {
      pixel.setRed(red*average/127.5);
      pixel.setGreen(green*average/127.5);
      pixel.setBlue(blue*average/127.5);
    } else {
      pixel.setRed((2-red/127.5)*average + 2*red - 255);
      pixel.setGreen((2-green/127.5)*average + 2*green - 255);
      pixel.setBlue((2-blue/127.5)*average + 2*blue - 255);
    }
  }
}
function applyBlur(image) {
  var width = image.getWidth();
  var height = image.getHeight();
  var newImage = new SimpleImage(width, height);
  for (var pixel of newImage.values()) {
    var x = pixel.getX();
    var y = pixel.getY();
    var oldPixel = image.getPixel(x, y);
    if (Math.random() < 0.5) {
      pixel.setAllFrom(oldPixel);
    } else {
      var newX = x + 20*Math.random() - 10;
      var newY = y + 10*Math.random() - 10;
      if (newX < 0) {
        newX = 0;
      }
      if (newX > width-1) {
        newX = width-1;
      }
      if (newY < 0) {
        newY = 0;
      }
      if (newY > height-1) {
        newY = height-1;
      }
      pixel.setAllFrom(image.getPixel(newX, newY));
    }
  }
  return newImage;
}
Tue, 12/26/2017 - 20:12

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv