Image Filters

image-filters.markdown

Image Filters

A Pen by Schindst on CodePen.

License.

index.html

<h1>Fun Filters</h1>
<h3>Explore exciting image filters</h3>
<canvas id="can"></canvas>
<p>
<input id="upload" type="file"
       multiple="false" accept="image/*"
       onchange="loadImage()">
  </p>
<p>
<input id="makegray" value="gray"
       type=button onclick="makeGray()">

  <input id="makeblue" value="blue"
       type=button onclick="makeBlue()">

  <input id="makerainbow" value="rainbow"
       type=button onclick="makeRainbow()">
  </p>
<input id="revert" value="revert"
       type=button onclick="revertToOriginal()">

script.js

var origImage = null;
var grayImage = null;
var blueImage = null;
var rainbowImage = null;

function loadImage() {
  alert('uploading');
}

function makeGray() {
  alert('making gray');
}

function makeRainbow() {
  alert('making rainbow');
}

function makeBlue() {
  alert('making blue');
}

function revertToOriginal() {
  alert('reverting');
}

style.css

body {
  background-image: linear-gradient(to bottom right, purple , yellow);
  text-align: center;
  color: white;
  font-family: helvetica;
}

h1 {
  text-transform: uppercase;
}

h3 {
  text-transform: lowercase;
}

canvas {
  background-color: white;
  border-radius: 20px;
  width: 250ptx;
}

input {
  width: 40ptx;
}