Pengolahan citra dengan html5 dan javascript bagian 3: Grayscale,Binary,Invert

<title>untitled</title>

<meta http-equiv="content-type" content="text/html;charset=utf-8">

<meta name="generator" content="Geany 1.23.1">

<script src="CIML.js" type="text/javascript"></script>

<img id="sumber" src="jeruk.jpg" style="display:none;">

<canvas id="jeruk"></canvas>

<canvas id="grayscale"></canvas>

<canvas id="binary"></canvas>

<canvas id="invert"></canvas>

<script type="text/javascript">

//ambil gambar sumber. ambil tinggi, lebar;

var sumberimg=document.getElementById('sumber');

var lebarSumber=sumberimg.width;

var tinggiSumber=sumberimg.height;

//ambil canvas jeruk, atur tinggi lebar

var jeruk=document.getElementById('jeruk');

jeruk.width=lebarSumber;

jeruk.height=tinggiSumber;


//gambar sumber ke kanvas jeruk

var cJeruk=jeruk.getContext('2d');

cJeruk.drawImage(sumberimg,0,0,lebarSumber,tinggiSumber);

//atur ukuran kanvas grayscale

var grayscale=document.getElementById('grayscale');

grayscale.width=lebarSumber;

grayscale.height=tinggiSumber;

//buat image baru dengan library CIML

var iGrayscale=new CIML('jeruk',0,0,lebarSumber,tinggiSumber);

//ubah ke grayscale

iGrayscale.grayscale();

//render ke canvas id=grayscale

iGrayscale.render('grayscale',0,0);

//atur ukuran kanvas Binary

var Binary=document.getElementById('binary');

Binary.width=lebarSumber;

Binary.height=tinggiSumber;

//buat image baru

var iBinary=new CIML('jeruk',0,0,lebarSumber,tinggiSumber);

//ubah ke binary

iBinary.binary(128);

//128 adalah nilai threshold;

//render ke kanvas binary

iBinary.render('binary',0,0);

//atur ukuran kanvas invert

var invert=document.getElementById('invert');

invert.width=lebarSumber;

invert.height=tinggiSumber;

</script>