Basic Filters

Basic image processing filters

by Gabriel Ambrósio Archanjo

HTML

by <a href="https://www.marvinj.org">www.marvinj.org</a></br>
<script src="https://www.marvinj.org/releases/marvinj-0.9.js"></script>

<div style="display:flex; margin-top:5px;">
  <div class="panelL">
    <button onclick="grayScale()">Gray Scale</button><br/>
    <button onclick="blackAndWhite()">Black and White</button><br/>
    <button onclick="thresholding()">Thresholding</button><br/>
    <button onclick="sepia()">Sepia</button><br/>
    <button onclick="emboss()">Emboss</button><br/>
    <button onclick="halftone()">Halftone</button><br/>
    <button onclick="invert()">Invert</button><br/>
    <button onclick="edgeDetection1()">Edge Detection 1</button><br/>
    <button onclick="edgeDetection2()">Edge Detection 2</button><br/>
    <button onclick="crop()">Crop</button><br/>
    <button onclick="scale()">Scale</button><br/>
    <button onclick="reset()">Reset</button><br/>
  </div>
  <div class="panelR">
    <canvas id="canvas" width="496" height="400"></canvas><br/>
  </div>
</div>

CSS

body { font-size: 12px; }

button {
  margin-bottom: 8px;
  width: 150px;
}

.panelL {
  width: 150px;
  height: 400px;
  display: inline-block;
  border: 1px solid #dedede;
}

.panelR {
  width: 400px;
  height: 400px;
  display: inline-block;
  border: 1px solid #dedede;
}

JavaScript

var canvas = document.getElementById("canvas");
var original = new MarvinImage();
var image;

original.load("https://i.imgur.com/lgO7TRl.png", function(){
   // Draw the original image 
   original.draw(canvas);
});

function grayScale(){
	image = original.clone();
  Marvin.grayScale(original, image);
  image.draw(canvas);
}

function blackAndWhite(){
	image = original.clone();
  Marvin.blackAndWhite(original, image, 20);
  image.draw(canvas);
}

function thresholding(){
	image = original.clone();
  Marvin.thresholding(original, image, 160);
  image.draw(canvas);
}

function sepia(){
  image = original.clone();
  Marvin.sepia(original, image, 30);
  image.draw(canvas);
}

function emboss(){
  image = original.clone();
  Marvin.emboss(original, image, 30);
  image.draw(canvas);
}

function halftone(){
  image = original.clone();
	Marvin.halftoneErrorDiffusion(original, image);
  image.draw(canvas);
}

function invert(){
	image = original.clone();
	Marvin.invertColors(original, image);
  image.draw(canvas);
}

function edgeDetection1(){
	image = original.clone();
  image.clear(0xFF000000);
	Marvin.prewitt(original, image);
	image.draw(canvas);
}

function edgeDetection2(){
	image = original.clone();
  image.clear(0xFF000000);
	Marvin.prewitt(original, image);
	Marvin.invertColors(image, image);
	Marvin.thresholding(image, image, 200);
	image.draw(canvas);
}

function crop(){
  image = original.clone();
	Marvin.crop(original, image, 140, 165, 125, 50);
	canvas.getContext("2d").clearRect(0,0,canvas.width, canvas.height);
	image.draw(canvas);
}

function scale(){
	image = original.clone();
	Marvin.scale(original, image, 200);
	canvas.getContext("2d").clearRect(0,0,canvas.width, canvas.height);
	image.draw(canvas);
}

function reset(){
	original.draw(canvas);
}