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

Posted 2022-07-20 知

篇首语：别裁伪体亲风雅，转益多师是汝师。本文由小常识网(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

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

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