纯JavaScript实现HTML5 Canvas六种特效滤镜示例-javascript-IT落伍者

实现了六款简单常见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)

复制代码代码如下: