A small test, the implementation of six simple common HTML5 canvas effect filter, and encapsulated into a pure JavaScript callable API file Gloomyfishfilter.js.
the supported effects filters are:
1. Anti-color
2. Gray tone
3. Fuzzy
4. Relief
5. Carving
6. Mirroring
Filter Principle Explanation:
1. Inverse color: Gets a pixel point RGB value R, G, b the new RGB value is (255-r, 255-g, 255-b)
2. Gray tune: Gets a pixel point RGB value R, G, b the new RGB value is
Copy Code code as follows:
NEWR = (R * 0.272) + (G * 0.534) + (b * 0.131);
NEWG = (R * 0.349) + (G * 0.686) + (b * 0.168);
Newb = (R * 0.393) + (G * 0.769) + (b * 0.189);
3. Blur: Convolution kernel based on a 5*5
4. Relief and Carving:
The difference between the RGB value of the first pixel of the current pixel and the RGB value of its last pixel plus 128
5. Mirroring: Simulates the object in the mirror with its corresponding effect.
Miscellaneous preparation
1. How to get the canvas 2d context object
Copy Code code as follows:
var canvas = document.getElementById ("target");
Canvas.width = Source.clientwidth;
Canvas.height = Source.clientheight;
if (!canvas.getcontext) {
Console.log ("Canvas not supported.") Please install a html5compatible browser. ");
Return
}
Get 2D context of canvas and draw image
Tempcontext = Canvas.getcontext ("2d");
2. How to draw a DOM img object into the canvas object
Copy Code code as follows:
var Source = document.getElementById ("source");
Tempcontext.drawimage (source, 0, 0, canvas.width,canvas.height);
3. How to get pixel data from the canvas object
Copy Code code as follows:
var canvas = document.getElementById ("target");
Varlen = canvas.width * Canvas.height * 4;
var canvasdata = tempcontext.getimagedata (0, 0, canvas.width, canvas.height);
var binarydata = Canvasdata.data;
4. How to implement mouse click event binding on DOM objects
Copy Code code as follows:
function bindbuttonevent (element, type, handler)
{
if (Element.addeventlistener) {
Element.addeventlistener (type, handler,false);
}else {
Element.attachevent (' On ' +type, handler);/For ie6,7,8
}
}
5. How to invoke the implementation of the Gfilter API to complete the filter function
Copy Code code as follows:
<scriptsrc= "Gloomyfishfilter.js" ></script>//Import API files
Gfilter.colorinvertprocess (BinaryData, Len); Calling API
6. Browser support: IE, FF, chrome test through, which IE on the support through the following tags to achieve:
Copy Code code as follows:
<meta http-equiv= "x-ua-compatible" content= "CHROME=IE8" >
Effect Demo:
Application source code:
CSS section:
Copy Code code as follows:
#svgContainer {
width:800px;
height:600px;
Background-color: #EEEEEE;
}
#sourceDiv {float:left border:2px solid blue}
#targetDiv {float:right;border:2px Solid red}
filter1.html HTML Source code:
Copy Code code as follows:
<! DOCTYPE html>
<meta http-equiv= "x-ua-compatible" content= "CHROME=IE8" >
<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8" >
<title>canvas Filter demo</title>
<link href= "Default.css" rel= "stylesheet"/>
<script src= "Gloomyfishfilter.js" ></scrip>
<body>
<div id= "Svgcontainer" >
<div id= "Sourcediv" >
</div>
<div id= "Targetdiv" >
<canvas id= "Target" ></canvas>
</div>
</div>
<div id= "Btn-group" >
<button type= "button" id= "Invert-button" > Anti-color </button>
<button type= "button" id= "Adjust-button" > Gray tones </button>
<button type= "button" id= "Blur-button" > Fuzzy </button>
<button type= "button" id= "Relief-button" > Relief </button>
<button type= "button" id= "Diaoke-button" > Carving </button>
<button type= "button" id= "Mirror-button" > Mirroring </button>
</div>
</body>
JavaScript source code in filter1.html:
Copy Code code as follows:
var tempcontext = null; Global variable 2d Context
Window.onload = function () {
var Source = document.getElementById ("source");
var canvas = document.getElementById ("target");
Canvas.width = Source.clientwidth;
Canvas.height = Source.clientheight;
if (!canvas.getcontext) {
Console.log ("Canvas not supported.") Please install a HTML5 compatible browser. ");
Return
}
Get 2D context of canvas and draw image
Tempcontext = Canvas.getcontext ("2d");
Tempcontext.drawimage (source, 0, 0, canvas.width, canvas.height);
Initialization actions
var Inbutton = document.getElementById ("Invert-button");
var Adbutton = document.getElementById ("Adjust-button");
var Blurbutton = document.getElementById ("Blur-button");
var Rebutton = document.getElementById ("Relief-button");
var Dkbutton = document.getElementById ("Diaoke-button");
var Mirrorbutton = document.getElementById ("Mirror-button");
Bind Mouse Click event
Bindbuttonevent (Inbutton, "click", Invertcolor);
Bindbuttonevent (Adbutton, "click", Adjustcolor);
Bindbuttonevent (Blurbutton, "click", Blurimage);
Bindbuttonevent (Rebutton, "click", Fudiaoimage);
Bindbuttonevent (Dkbutton, "click", Kediaoimage);
Bindbuttonevent (Mirrorbutton, "click", Mirrorimage);
}
function bindbuttonevent (element, type, handler)
{
if (Element.addeventlistener) {
Element.addeventlistener (type, handler, false);
} else {
Element.attachevent (' On ' +type, handler); For ie6,7,8
}
}
function Invertcolor () {
var canvas = document.getElementById ("target");
var len = canvas.width * Canvas.height * 4;
var canvasdata = tempcontext.getimagedata (0, 0, canvas.width, canvas.height);
var binarydata = Canvasdata.data;
Processing all the pixels
Gfilter.colorinvertprocess (BinaryData, Len);
Copying back canvas data to canvas
Tempcontext.putimagedata (canvasdata, 0, 0);
}
function Adjustcolor () {
var canvas = document.getElementById ("target");
var len = canvas.width * Canvas.height * 4;
var canvasdata = tempcontext.getimagedata (0, 0, canvas.width, canvas.height);
var binarydata = Canvasdata.data;
Processing all the pixels
Gfilter.coloradjustprocess (BinaryData, Len);
Copying back canvas data to canvas
Tempcontext.putimagedata (canvasdata, 0, 0);
}
function Blurimage ()
{
var canvas = document.getElementById ("target");
var len = canvas.width * Canvas.height * 4;
var canvasdata = tempcontext.getimagedata (0, 0, canvas.width, canvas.height);
Processing all the pixels
Gfilter.blurprocess (Tempcontext, canvasdata);
Copying back canvas data to canvas
Tempcontext.putimagedata (canvasdata, 0, 0);
}
function Fudiaoimage ()
{
var canvas = document.getElementById ("target");
var len = canvas.width * Canvas.height * 4;
var canvasdata = tempcontext.getimagedata (0, 0, canvas.width, canvas.height);
Processing all the pixels
Gfilter.reliefprocess (Tempcontext, canvasdata);
Copying back canvas data to canvas
Tempcontext.putimagedata (canvasdata, 0, 0);
}
function Kediaoimage ()
{
var canvas = document.getElementById ("target");
var len = canvas.width * Canvas.height * 4;
var canvasdata = tempcontext.getimagedata (0, 0, canvas.width, canvas.height);
Processing all the pixels
Gfilter.diaokeprocess (Tempcontext, canvasdata);
Copying back canvas data to canvas
Tempcontext.putimagedata (canvasdata, 0, 0);
}
function Mirrorimage ()
{
var canvas = document.getElementById ("target");
var len = canvas.width * Canvas.height * 4;
var canvasdata = tempcontext.getimagedata (0, 0, canvas.width, canvas.height);
Processing all the pixels
Gfilter.mirrorprocess (Tempcontext, canvasdata);
Copying back canvas data to canvas
Tempcontext.putimagedata (canvasdata, 0, 0);
}
Filter source code (gloomyfishfilter.js):
Copy Code code as follows:
var gfilter = {
Type: "Canvas",
Name: "Filters",
Author: "Zhigang",
Getinfo:function () {
return This.author + ' + this.type + ' + this.name;
},
/**
* Invert color value of pixel, new pixel = RGB (255-r, 255-g, 255-b)
*
* @param Binarydata-canvas ' s Imagedata.data
* @param l-length of data (width * height of image data)
*/
Colorinvertprocess:function (BinaryData, L) {
for (var i = 0; i < L + = 4) {
var r = Binarydata[i];
var g = binarydata[i + 1];
var B = binarydata[i + 2];
Binarydata[i] = 255-r;
Binarydata[i + 1] = 255-g;
Binarydata[i + 2] = 255-b;
}
},
/**
* Adjust color values and make it more darker and gray ...
*
* @param binarydata
* @param l
*/
Coloradjustprocess:function (BinaryData, L) {
for (var i = 0; i < L + = 4) {
var r = Binarydata[i];
var g = binarydata[i + 1];
var B = binarydata[i + 2];
Binarydata[i] = (R * 0.272) + (G * 0.534) + (b * 0.131);
Binarydata[i + 1] = (R * 0.349) + (G * 0.686) + (b * 0.168);
Binarydata[i + 2] = (R * 0.393) + (G * 0.769) + (b * 0.189);
}
},
/**
* Deep clone image data of canvas
*
* @param context
* @param src
* @returns
*/
Copyimagedata:function (context, SRC)
{
var dst = Context.createimagedata (Src.width, src.height);
Dst.data.set (Src.data);
return DST;
},
/**
* Convolution-keneral Size 5*5-blur effect filter (blur effect)
*
* @param context
* @param canvasdata
*/
Blurprocess:function (context, Canvasdata) {
Console.log ("Canvas filter-blur process");
var tempcanvasdata = this.copyimagedata (context, canvasdata);
var sumred = 0.0, Sumgreen = 0.0, sumblue = 0.0;
for (var x = 0; x < Tempcanvasdata.width + +) {
for (var y = 0; y < tempcanvasdata.height; y++) {
Index of the pixel in the array
var idx = (x + y * tempcanvasdata.width) * 4;
for (var subcol=-2; subcol<=2; subcol++) {
var Coloff = subcol + x;
if (Coloff <0 | | | Coloff >= tempcanvasdata.width) {
Coloff = 0;
}
for (var subrow=-2; subrow<=2; subrow++) {
var Rowoff = Subrow + y;
if (Rowoff < 0 | | | Rowoff >= tempcanvasdata.height) {
Rowoff = 0;
}
var idx2 = (Coloff + rowoff * tempcanvasdata.width) * 4;
var r = tempcanvasdata.data[idx2 + 0];
var g = tempcanvasdata.data[idx2 + 1];
var B = tempcanvasdata.data[idx2 + 2];
Sumred + = r;
Sumgreen = g;
Sumblue + b;
}
}
Calculate new RGB Value
var nr = (sumred/25.0);
var ng = (sumgreen/25.0);
var nb = (sumblue/25.0);
Clear previous for next pixel point
sumred = 0.0;
Sumgreen = 0.0;
Sumblue = 0.0;
Assign new pixel value
Canvasdata.data[idx + 0] = nr; Red Channel
Canvasdata.data[idx + 1] = ng; Green Channel
Canvasdata.data[idx + 2] = NB; Blue Channel
Canvasdata.data[idx + 3] = 255; Alpha Channel
}
}
},
/**
* After pixel Value-before pixel value + 128
* Relief Effect
*/
Reliefprocess:function (context, Canvasdata) {
Console.log ("Canvas filter-relief process");
var tempcanvasdata = this.copyimagedata (context, canvasdata);
for (var x = 1; x < tempcanvasdata.width-1 + +)
{
for (var y = 1; y < tempcanvasdata.height-1; y++)
{
Index of the pixel in the array
var idx = (x + y * tempcanvasdata.width) * 4;
var bidx = ((x-1) + y * tempcanvasdata.width) * 4;
var aidx = ((x+1) + y * tempcanvasdata.width) * 4;
Calculate new RGB Value
var nr = tempcanvasdata.data[aidx + 0]-tempcanvasdata.data[bidx + 0] + 128;
var ng = Tempcanvasdata.data[aidx + 1]-tempcanvasdata.data[bidx + 1] + 128;
var nb = Tempcanvasdata.data[aidx + 2]-tempcanvasdata.data[bidx + 2] + 128;
NR = (Nr < 0)? 0: (nr >255) 255:NR);
ng = (ng < 0)? 0: ((ng >255) 255:ng);
NB = (NB < 0)? 0: (NB >255) 255:NB);
Assign new pixel value
Canvasdata.data[idx + 0] = nr; Red Channel
Canvasdata.data[idx + 1] = ng; Green Channel
Canvasdata.data[idx + 2] = NB; Blue Channel
Canvasdata.data[idx + 3] = 255; Alpha Channel
}
}
},
/**
* Before pixel value-after pixel value + 128
* Carving Effect
*
* @param canvasdata
*/
Diaokeprocess:function (context, Canvasdata) {
Console.log ("Canvas filter-process");
var tempcanvasdata = this.copyimagedata (context, canvasdata);
for (var x = 1; x < tempcanvasdata.width-1 + +)
{
for (var y = 1; y < tempcanvasdata.height-1; y++)
{
Index of the pixel in the array
var idx = (x + y * tempcanvasdata.width) * 4;
var bidx = ((x-1) + y * tempcanvasdata.width) * 4;
var aidx = ((x+1) + y * tempcanvasdata.width) * 4;
Calculate new RGB Value
var nr = tempcanvasdata.data[bidx + 0]-tempcanvasdata.data[aidx + 0] + 128;
var ng = Tempcanvasdata.data[bidx + 1]-tempcanvasdata.data[aidx + 1] + 128;
var nb = Tempcanvasdata.data[bidx + 2]-tempcanvasdata.data[aidx + 2] + 128;
NR = (Nr < 0)? 0: (nr >255) 255:NR);
ng = (ng < 0)? 0: ((ng >255) 255:ng);
NB = (NB < 0)? 0: (NB >255) 255:NB);
Assign new pixel value
Canvasdata.data[idx + 0] = nr; Red Channel
Canvasdata.data[idx + 1] = ng; Green Channel
Canvasdata.data[idx + 2] = NB; Blue Channel
Canvasdata.data[idx + 3] = 255; Alpha Channel
}
}
},
/**
* Mirror Reflect
*
* @param context
* @param canvasdata
*/
Mirrorprocess:function (context, Canvasdata) {
Console.log ("Canvas filter-process");
var tempcanvasdata = this.copyimagedata (context, canvasdata);
for (var x = 0; x < tempcanvasdata.width/x + +)//Column
{
for (var y = 0; y < tempcanvasdata.height; y++)//row
{
Index of the pixel in the array
var idx = (x + y * tempcanvasdata.width) * 4;
var midx = ((tempcanvasdata.width-1)-X) + y * tempcanvasdata.width) * 4;
Assign new pixel value
Canvasdata.data[midx + 0] = tempcanvasdata.data[idx + 0]; Red Channel
Canvasdata.data[midx + 1] = Tempcanvasdata.data[idx + 1];; Green Channel
Canvasdata.data[midx + 2] = Tempcanvasdata.data[idx + 2];; Blue Channel
Canvasdata.data[midx + 3] = 255; Alpha Channel
}
}
},
};
