純JavaScript實現HTML5 Canvas六種特效濾鏡示例

實現了六款簡單常見HTML Canvas特效濾鏡並且封裝成一個純JavaScript可調用的API文件gloomyfishfilterjs程序源代碼如下感興趣的朋友可以參考下哈

　　小試牛刀實現了六款簡單常見HTML Canvas特效濾鏡並且封裝成一個純JavaScript可調用的API文件gloomyfishfilterjs支持的特效濾鏡分別為
反色
灰色調
模糊
浮雕
雕刻
鏡像

濾鏡原理解釋
反色獲取一個像素點RGB值r g b則新的RGB值為(r g b)
灰色調獲取一個像素點RGB值r g b則新的RGB值為

復制代碼代碼如下:
newr = (r * ) + (g * ) + (b * );
newg = (r * ) + (g * ) + (b * );
newb = (r * ) + (g * ) + (b * );

　　
模糊基於一個*的卷積核
浮雕與雕刻
基於當前像素的前一個像素RGB值與它的後一個像素的RGB值之差再加上
鏡像模擬了物體在鏡子中與之對應的效果
雜項准備
如何獲取Canvas d context對象

復制代碼代碼如下:
var canvas = documentgetElementById("target");
canvaswidth = sourceclientWidth;
canvasheight = sourceclientHeight;
if(!canvasgetContext) {
consolelog("Canvas not supported Please install a HTMLcompatible browser");
return;
}
// get D context of canvas and draw image
tempContext = canvasgetContext("d");

　　
如何繪制一個DOM img對象到Canvas對象中

復制代碼代碼如下:
var source = documentgetElementById("source");
tempContextdrawImage(source canvaswidthcanvasheight);

　　
如何從Canvas對象中獲取像素數據

復制代碼代碼如下:
var canvas = documentgetElementById("target");
varlen = canvaswidth * canvasheight * ;
var canvasData = tempContextgetImageData( canvaswidth canvasheight);
var binaryData = canvasDatadata;

　　
如何對DOM對象實現鼠標Click事件綁定

復制代碼代碼如下:
function bindButtonEvent(element type handler)
{
if(elementaddEventListener){
elementaddEventListener(type handlerfalse);
}else {
elementattachEvent(on+type handler);// for IE
}
}

　　
如何調用實現的gfilter API完成濾鏡功能

復制代碼代碼如下:
<scriptsrc="gloomyfishfilterjs"></script> //導入API文件
gfiltercolorInvertProcess(binaryData len); //調用 API

　　
浏覽器支持IE FF Chrome上測試通過其中IE上支持通過以下標簽實現

復制代碼代碼如下:
<meta httpequiv="XUACompatible"content="chrome=IE">

　　
效果演示

　　
應用程序源代碼
CSS部分

復制代碼代碼如下:
#svgContainer {
width:px;
height:px;
backgroundcolor:#EEEEEE;
}
#sourceDiv { float: left; border: px solid blue}
#targetDiv { float: right;border: px solid red}

　　
filterhtml中HTML源代碼

復制代碼代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta httpequiv="XUACompatible" content="chrome=IE">
<meta httpequiv="Contenttype" content="text/html;charset=UTF">
<title>Canvas Filter Demo</title>
<link href="defaultcss" rel="stylesheet" />
<script src="gloomyfishfilterjs"></scrip>
</head>
<body>
<h>HTML Canvas Image Process By Gloomy Fish</h>
<div id="svgContainer">
<div id="sourceDiv">
<img id="source" src="/testpng" />
</div>
<div id="targetDiv">
<canvas id="target"></canvas>
</div>
</div>
<div id="btngroup">
<button type="button" id="invertbutton">反色</button>
<button type="button" id="adjustbutton">灰色調</button>
<button type="button" id="blurbutton">模糊</button>
<button type="button" id="reliefbutton">浮雕</button>
<button type="button" id="diaokebutton">雕刻</button>
<button type="button" id="mirrorbutton">鏡像</button>
</div>
</body>
</html>

　　
filterhtml中JavaScript源代碼

復制代碼代碼如下:
var tempContext = null; // global variable d context
windowonload = function() {
var source = documentgetElementById("source");
var canvas = documentgetElementById("target");
canvaswidth = sourceclientWidth;
canvasheight = sourceclientHeight;

if (!canvasgetContext) {
consolelog("Canvas not supported Please install a HTML compatible browser");
return;
}

// get D context of canvas and draw image
tempContext = canvasgetContext("d");
tempContextdrawImage(source canvaswidth canvasheight);

// initialization actions
var inButton = documentgetElementById("invertbutton");
var adButton = documentgetElementById("adjustbutton");
var blurButton = documentgetElementById("blurbutton");
var reButton = documentgetElementById("reliefbutton");
var dkButton = documentgetElementById("diaokebutton");
var mirrorButton = documentgetElementById("mirrorbutton");
// 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(elementaddEventListener) {
elementaddEventListener(type handler false);
} else {
elementattachEvent(on+type handler); // for IE
}
}

function invertColor() {
var canvas = documentgetElementById("target");
var len = canvaswidth * canvasheight * ;
var canvasData = tempContextgetImageData( canvaswidth canvasheight);
var binaryData = canvasDatadata;

// Processing all the pixels
gfiltercolorInvertProcess(binaryData len);
// Copying back canvas data to canvas
tempContextputImageData(canvasData );
}

function adjustColor() {
var canvas = documentgetElementById("target");
var len = canvaswidth * canvasheight * ;
var canvasData = tempContextgetImageData( canvaswidth canvasheight);
var binaryData = canvasDatadata;

// Processing all the pixels
gfiltercolorAdjustProcess(binaryData len);
// Copying back canvas data to canvas
tempContextputImageData(canvasData );
}

function blurImage()
{
var canvas = documentgetElementById("target");
var len = canvaswidth * canvasheight * ;
var canvasData = tempContextgetImageData( canvaswidth canvasheight);

// Processing all the pixels
gfilterblurProcess(tempContext canvasData);
// Copying back canvas data to canvas
tempContextputImageData(canvasData );
}

function fudiaoImage()
{
var canvas = documentgetElementById("target");
var len = canvaswidth * canvasheight * ;
var canvasData = tempContextgetImageData( canvaswidth canvasheight);

// Processing all the pixels
gfilterreliefProcess(tempContext canvasData);
// Copying back canvas data to canvas
tempContextputImageData(canvasData );
}

function kediaoImage()
{
var canvas = documentgetElementById("target");
var len = canvaswidth * canvasheight * ;
var canvasData = tempContextgetImageData( canvaswidth canvasheight);

// Processing all the pixels
gfilterdiaokeProcess(tempContext canvasData);
// Copying back canvas data to canvas
tempContextputImageData(canvasData );
}

function mirrorImage()
{
var canvas = documentgetElementById("target");
var len = canvaswidth * canvasheight * ;
var canvasData = tempContextgetImageData( canvaswidth canvasheight);

// Processing all the pixels
gfiltermirrorProcess(tempContext canvasData);
// Copying back canvas data to canvas
tempContextputImageData(canvasData );
}

　　
濾鏡源代碼(gloomyfishfilterjs)

復制代碼代碼如下:

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20416.html