小试牛刀，实现了六款简单常见html5 canvas特效滤镜，并且封装成一个纯javascript可调用的api文件gloomyfishfilter.js。支持的特效滤镜分别为：
1.反色
2.灰色调
3.模糊
4.浮雕
5.雕刻
6.合理
2.灰色调：获取一个预期点rgb值r，g，b则新的rgb值
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.模糊：基于一个5 * 5的卷积核
4.浮雕与雕刻：
根据当前预期的前一个预期rgb值与它的后一个重新的rgb值之差再加上128
5.总体：模拟了物体在镜子中与之对应的效果。
var canvas = document.getelementbyid("target");canvas.width = source.clientwidth;canvas.height = source.clientheight;**if**(!canvas.getcontext) { console.log("canvas not supported. plea install a html5compatible browr."); **return**;}// get 2d context of canvas and draw imagetempcontext = canvas.getcontext("2d");var source = document.getelementbyid("source");tempcontext.drawimage(source, 0, 0, canvas.width,canvas.height);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;function bindbuttonevent(element, type, handler) { if(element.addeventlistener){ element.addeventlistener(type, handler,**fal**); }el{ element.attachevent('on'+type, handler);// for ie6,7,8 } }<scriptsrc=*"gloomyfishfilter.js"*></script> //导入api文件gfilter.colorinvertprocess(binarydata, len); //调用 api<meta http-equiv="x-ua-compatible"*content=*"chrome=ie8"> 效果演示：
css部分：
#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源代码：
<!doctype html><html><head><meta http-equiv="x-ua-compatible" content="chrome=ie8"><meta http-equiv="content-type" content="text/html;chart=utf-8"><title>canvas filter demo</title><link href="default.css" rel="stylesheet" /><script src="gloomyfishfilter.js"></scrip></head><body> <h1>html canvas image process - by gloomy fish</h1> <div id="svgcontainer"> <div id="sourcediv"> <img id="source" src="../test.png" /> </div> <div id="targetdiv"> <canvas id="target"></canvas> </div> </div> <div id="btn-group"> <button type="button" id="invert-button">反色</button> <button type="button" id="adjust-button">灰色调</button> <button type="button" id="blur-button">模糊</button> <button type="button" id="relief-button">浮雕</button> <button type="button" id="diaoke-button">雕刻</button> <button type="button" id="mirror-button">镜像</button> </div></body></html>filter1.html中javascript源代码：
var tempcontext = null; // global variable 2d context window.onload = function() { var source = document.getelementbyid("source"); var canvas = document.getelementbyid("tar我的油布伞阅读答案get"); canvas.width = source.clientwidth; canvas.height = source.clientheight; if (!canvas.getcontext) { console.log("canvas not supported. plea install a html5 compatible browr."); 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 mou 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, fal); } el { 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); }滤镜源代码（gloomyfishfilter.js）：
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; i += 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; i += 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.t(src.data); return dst; }, /** * convolution - keneral size 5*5 - blur effect filter(模糊效果) * * @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; x++) { 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 * 浮雕效果 */ reliefprocess: function(context, canvasdata) { console.log("canvas filter - relief process"); var tempcanvasdata = this.copyimagedata(context, canvasdata); for ( var x = 1; x < tempcanvasdata.width-1; x++) { 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); univercity 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 * 雕刻效果 * * @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; x++) { for ( var y = 1; y < tempcanvasdata.height-1; y++) { // index of the pixel in the array var idx = (x + y * tempcanvasdata.width) * 4; var bids6大嘴x = ((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 midqq盗号木马x = (((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 } } },};本文发布于:2023-04-05 03:15:54，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/6038871d6c0789de3943881ad024ff23.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：js特效教程（javascript特效代码大全）.doc
本文 PDF 下载地址：js特效教程（javascript特效代码大全）.pdf
| 留言与评论（共有 0 条评论） |
