知识大全 纯JavaScript实现HTML5 Canvas六种特效滤镜示例

Posted 知

篇首语：别裁伪体亲风雅，转益多师是汝师。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 纯JavaScript实现HTML5 Canvas六种特效滤镜示例相关的知识，希望对你有一定的参考价值。

纯JavaScript实现HTML5 Canvas六种特效滤镜示例  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

实现了六款简单常见HTML Canvas特效滤镜 并且封装成一个纯JavaScript可调用的API文件gloomyfishfilter js 程序源代码如下 感兴趣的朋友可以参考下哈  

　　小试牛刀 实现了六款简单常见HTML Canvas特效滤镜 并且封装成一个纯JavaScript可调用的API文件gloomyfishfilter js 支持的特效滤镜分别为 反色 灰色调 模糊 浮雕 雕刻 镜像 滤镜原理解释 反色 获取一个像素点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 = document getElementById("target"); canvas width = source clientWidth; canvas height = source clientHeight; if(!canvas getContext) console log("Canvas not supported Please install a HTML patible browser "); return; // get D context of canvas and draw image tempContext = canvas getContext(" d");

　　 如何绘制一个DOM img对象到Canvas对象中

复制代码 代码如下: var source = document getElementById("source"); tempContext drawImage(source canvas width canvas height);

　　 如何从Canvas对象中获取像素数据

复制代码 代码如下: var canvas = document getElementById("target"); varlen = canvas width * canvas height * ; var canvasData = tempContext getImageData( canvas width canvas height); var binaryData = canvasData data;

　　 如何对DOM对象实现鼠标Click事件绑定

复制代码 代码如下: function bindButtonEvent(element type handler) if(element addEventListener) element addEventListener(type handler false); else element attachEvent( on +type handler);// for IE

　　 如何调用实现的gfilter API完成滤镜功能

复制代码 代码如下: <scriptsrc="gloomyfishfilter js"></script> //导入API文件 gfilter colorInvertProcess(binaryData len); //调用 API

　　 浏览器支持 IE FF Chrome上测试通过 其中IE上支持通过以下标签实现

复制代码 代码如下: <meta equiv="X UA Compatible"content="chrome=IE ">

　　 效果演示

>

　　 应用程序源代码 CSS部分

复制代码 代码如下: #svgContainer width: px; height: px; background color:#EEEEEE; #sourceDiv float: left; border: px solid blue #targetDiv float: right;border: px solid red

　　 filter 中HTML源代码

复制代码 代码如下: <!DOCTYPE > <> <head> <meta equiv="X UA Compatible" content="chrome=IE "> <meta equiv="Content type" content="text/;charset=UTF "> <title>Canvas Filter Demo</title> <link href="default css" rel="stylesheet" /> <script src=gloomyfishfilter js></scrip> </head> <body> <h >HTML Canvas Image Process By Gloomy Fish</h > <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> </>

　　 filter 中JavaScript源代码

复制代码 代码如下: var tempContext = null; // global variable d 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 HTML patible browser "); return; // get D context of canvas and draw image tempContext = canvas getContext(" d"); tempContext drawImage(source 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 IE function invertColor() var canvas = document getElementById("target"); var len = canvas width * canvas height * ; var canvasData = tempContext getImageData( 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 ); function adjustColor() var canvas = document getElementById("target"); var len = canvas width * canvas height * ; var canvasData = tempContext getImageData( 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 ); function blurImage() var canvas = document getElementById("target"); var len = canvas width * canvas height * ; var canvasData = tempContext getImageData( canvas width canvas height); // Processing all the pixels gfilter blurProcess(tempContext canvasData); // Copying back canvas data to canvas tempContext putImageData(canvasData ); function fudiaoImage() var canvas = document getElementById("target"); var len = canvas width * canvas height * ; var canvasData = tempContext getImageData( canvas width canvas height); // Processing all the pixels gfilter reliefProcess(tempContext canvasData); // Copying back canvas data to canvas tempContext putImageData(canvasData ); function kediaoImage() var canvas = document getElementById("target"); var len = canvas width * canvas height * ; var canvasData = tempContext getImageData( canvas width canvas height); // Processing all the pixels gfilter diaokeProcess(tempContext canvasData); // Copying back canvas data to canvas tempContext putImageData(canvasData ); function mirrorImage() var canvas = document getElementById("target"); var len = canvas width * canvas height * ; var canvasData = tempContext getImageData( canvas width canvas height); // Processing all the pixels gfilter mirrorProcess(tempContext canvasData); // Copying back canvas data to canvas tempContext putImageData(canvasData );

　　 滤镜源代码(gloomyfishfilter js)

复制代码 代码如下: cha138/Article/program/Java/JSP/201311/20416

相关参考