Pure JavaScript Implementation HTML5 Canvas Six kinds of effects filter examples _javascript tips

Source: Internet
Author: User
Tags button type
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
}
}
},
};
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.