熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

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

2013-11-15 12:09:35  來源: JSP教程 
實現了六款簡單常見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)

復制代碼 代碼如下:

  
var gfilter = {
type: "canvas"
name: "filters"
author: "zhigang"
getInfo: function () {
return thisauthor + + thistype + + thisname;
}
/**
* invert color value of pixel new pixel = RGB(r g b)
*
* @param binaryData canvass imagedatadata
* @param l length of data (width * height of image data)
*/
colorInvertProcess: function(binaryData l) {
for (var i = ; i < l; i += ) {
var r = binaryData[i];
var g = binaryData[i + ];
var b = binaryData[i + ];

binaryData[i] = r;
binaryData[i + ] = g;
binaryData[i + ] = b;
}
}

/**
* adjust color values and make it more darker and gray
*
* @param binaryData
* @param l
*/
colorAdjustProcess: function(binaryData l) {
for (var i = ; i < l; i += ) {
var r = binaryData[i];
var g = binaryData[i + ];
var b = binaryData[i + ];
binaryData[i] = (r * ) + (g * ) + (b * );
binaryData[i + ] = (r * ) + (g * ) + (b * );
binaryData[i + ] = (r * ) + (g * ) + (b * );
}
}

/**
* deep clone image data of canvas
*
* @param context
* @param src
* @returns
*/
copyImageData: function(context src)
{
var dst = contextcreateImageData(srcwidth srcheight);
dstdataset(srcdata);
return dst;
}

/**
* convolution keneral size * blur effect filter(模糊效果)
*
* @param context
* @param canvasData
*/
blurProcess: function(context canvasData) {
consolelog("Canvas Filter blur process");
var tempCanvasData = thiscopyImageData(context canvasData);
var sumred = sumgreen = sumblue = ;
for ( var x = ; x < tempCanvasDatawidth; x++) {
for ( var y = ; y < tempCanvasDataheight; y++) {
// Index of the pixel in the array
var idx = (x + y * tempCanvasDatawidth) * ;
for(var subCol=; subCol<=; subCol++) {
var colOff = subCol + x;
if(colOff < || colOff >= tempCanvasDatawidth) {
colOff = ;
}
for(var subRow=; subRow<=; subRow++) {
var rowOff = subRow + y;
if(rowOff < || rowOff >= tempCanvasDataheight) {
rowOff = ;
}
var idx = (colOff + rowOff * tempCanvasDatawidth) * ;
var r = tempCanvasDatadata[idx + ];
var g = tempCanvasDatadata[idx + ];
var b = tempCanvasDatadata[idx + ];
sumred += r;
sumgreen += g;
sumblue += b;
}
}
// calculate new RGB value
var nr = (sumred / );
var ng = (sumgreen / );
var nb = (sumblue / );
// clear previous for next pixel point
sumred = ;
sumgreen = ;
sumblue = ;
// assign new pixel value
canvasDatadata[idx + ] = nr; // Red channel
canvasDatadata[idx + ] = ng; // Green channel
canvasDatadata[idx + ] = nb; // Blue channel
canvasDatadata[idx + ] = ; // Alpha channel
}
}
}

/**
* after pixel value before pixel value +
* 浮雕效果
*/
reliefProcess: function(context canvasData) {
consolelog("Canvas Filter relief process");
var tempCanvasData = thiscopyImageData(context canvasData);
for ( var x = ; x < tempCanvasDatawidth; x++)
{
for ( var y = ; y < tempCanvasDataheight; y++)
{
// Index of the pixel in the array
var idx = (x + y * tempCanvasDatawidth) * ;
var bidx = ((x) + y * tempCanvasDatawidth) * ;
var aidx = ((x+) + y * tempCanvasDatawidth) * ;
// calculate new RGB value
var nr = tempCanvasDatadata[aidx + ] tempCanvasDatadata[bidx + ] + ;
var ng = tempCanvasDatadata[aidx + ] tempCanvasDatadata[bidx + ] + ;
var nb = tempCanvasDatadata[aidx + ] tempCanvasDatadata[bidx + ] + ;
nr = (nr < ) ? : ((nr >) ? : nr);
ng = (ng < ) ? : ((ng >) ? : ng);
nb = (nb < ) ? : ((nb >) ? : nb);
// assign new pixel value
canvasDatadata[idx + ] = nr; // Red channel
canvasDatadata[idx + ] = ng; // Green channel
canvasDatadata[idx + ] = nb; // Blue channel
canvasDatadata[idx + ] = ; // Alpha channel
}
}
}

/**
* before pixel value after pixel value +
* 雕刻效果
*
* @param canvasData
*/
diaokeProcess: function(context canvasData) {
consolelog("Canvas Filter process");
var tempCanvasData = thiscopyImageData(context canvasData);
for ( var x = ; x < tempCanvasDatawidth; x++)
{
for ( var y = ; y < tempCanvasDataheight; y++)
{
// Index of the pixel in the array
var idx = (x + y * tempCanvasDatawidth) * ;
var bidx = ((x) + y * tempCanvasDatawidth) * ;
var aidx = ((x+) + y * tempCanvasDatawidth) * ;
// calculate new RGB value
var nr = tempCanvasDatadata[bidx + ] tempCanvasDatadata[aidx + ] + ;
var ng = tempCanvasDatadata[bidx + ] tempCanvasDatadata[aidx + ] + ;
var nb = tempCanvasDatadata[bidx + ] tempCanvasDatadata[aidx + ] + ;
nr = (nr < ) ? : ((nr >) ? : nr);
ng = (ng < ) ? : ((ng >) ? : ng);
nb = (nb < ) ? : ((nb >) ? : nb);
// assign new pixel value
canvasDatadata[idx + ] = nr; // Red channel
canvasDatadata[idx + ] = ng; // Green channel
canvasDatadata[idx + ] = nb; // Blue channel
canvasDatadata[idx + ] = ; // Alpha channel
}
}
}

/**
* mirror reflect
*
* @param context
* @param canvasData
*/
mirrorProcess : function(context canvasData) {
consolelog("Canvas Filter process");
var tempCanvasData = thiscopyImageData(context canvasData);
for ( var x = ; x < tempCanvasDatawidth; x++) // column
{
for ( var y = ; y < tempCanvasDataheight; y++) // row
{
// Index of the pixel in the array
var idx = (x + y * tempCanvasDatawidth) * ;
var midx = (((tempCanvasDatawidth ) x) + y * tempCanvasDatawidth) * ;
// assign new pixel value
canvasDatadata[midx + ] = tempCanvasDatadata[idx + ]; // Red channel
canvasDatadata[midx + ] = tempCanvasDatadata[idx + ]; ; // Green channel
canvasDatadata[midx + ] = tempCanvasDatadata[idx + ]; ; // Blue channel
canvasDatadata[midx + ] = ; // Alpha channel
}
}
}
};


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20416.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.