Image Filter Source Code

HTML5 Web and Game Development

image-filter.js

Image Filters Example Red Image Filter

Overview

Image filter source code uses the HTML5 canvas and JavaScript. Tap buttons. Change the image to all red, green or blue. The JavaScript to filter an image, follows.

Declare Variables

var canvas  = null;
var context  = null;
var eContent = null;
// Image reference:
var img   = null;
// Default image width & height:
var nDim = Number(200);
var sDim = "200px";

Load Image, Assign Listener

function loadImage(){
 
canvas = document.getElementById(
 'cv'
);

context = canvas.getContext(
 '2d'
);

// Surrounds content area:
eContent = document.getElementById(
 'eContent'
); 

img = new Image();
img.nFilter = null;
img.onload = function() {
 context.drawImage(
  this,
  0,
  0,
  nDim,
  nDim
 );
 
 var n = ev.currentTarget.nFilter;
 if(n != null){
  drawFilter(n)
 }
};

setCanvasDimensions();

img.src = 'https://code.7thunders.biz/thumbnails/ss-harp.png'; 
}

Resize Event Listener

/**
* Respond when browser
* window resizes.
*/
function resizeHandler(ev){
setCanvasDimensions();
drawReset(null);
}

Resize the canvas based on the new window dimensions.

function setCanvasDimensions(){

// Save the window height,width:
var nW = Number(eContent.clientWidth);
var nH = Number(window.innerHeight);
var nXOut = nW;

// Landscape:
if (nW > nH){

// Canvas fills just 4/10
// of the width:
nDim = Number(nW * 0.4);

// Canvas floats right:
canvas.style.cssFloat = "right";
canvas.style.display = "inline";

}

// Portrait:
else{

nDim = nW;

// Canvas doesn't float:
canvas.style.cssFloat = "none";
canvas.style.display = "block";

}

sDim = new String(nDim + "px");

if(canvas != null){

// Assign width,height:
canvas.width = nDim;
canvas.height = nDim;

// Assign width,height style:
canvas.style.width = sDim;
canvas.style.height = sDim;
}

}

Reset Before Filter

/**
* Function drawReset()
* @param {Number) n:
* Color channel pass
* to drawFilter() after
* image loads
*/
function drawReset(n){
 // Older browsers, switch
 // images to force a reload of
 // the kinnor.
 img.nFilter = null;
 img.src = 'https://7thunders.biz/thumbnails/color-blue.png';
 
 img.nFilter = n;
 img.src = 'https://code.7thunders.biz/thumbnails/ss-harp.jpg';
}

Image Filter

/**
 Function drawFilter()
 @param {Number} n:
 0: save only the red channel.
 1: save only the green channel.
 2: save only the blue channel.
 */
function drawFilter(n){
 
var aPixels = context.getImageData(
 0, 
 0, 
 nDim,
 nDim
);

var data = aPixels.data;

var intSave = 0;

for(var i = 0; i < data.length; i += 4) {
 
 intSave = data[i+n];
// Red Component
 data[i] = 0;
// Green component
 data[i + 1] = 0; 
// Blue component
 data[i + 2] = 0; 
 data [i + n] = intSave;
// Dont change alpha component.

}
// Display new image
context.putImageData(
 aPixels, 
 0, 
 0
);
}