前端

小試牛刀，實(shí)現(xiàn)了六款簡單常見HTML5 Canvas特效濾鏡，并且封裝成一個(gè)純JavaScript可調(diào)用的API文件gloomyfishfilter.js。支持的特效濾鏡分別為：

1.反色

2.灰色調(diào)

3.模糊

4.浮雕

5.雕刻

6.合理

濾鏡原理解釋：

2.灰色調(diào)：獲取一個(gè)預(yù)期點(diǎn)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.模糊：基于一個(gè)5 * 5的卷積核

4.浮雕與雕刻：

根據(jù)當(dāng)前預(yù)期的前一個(gè)預(yù)期RGB值與它的后一個(gè)重新的RGB值之差再加上128

5.總體：模擬了物體在鏡子中與之對應(yīng)的效果。

雜項(xiàng)準(zhǔn)備

1、如何獲取Canvas 2d 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 HTML5compatible browser.");   **return**;}// get 2D context of canvas and draw imagetempContext = canvas.getContext("2d");

2、如何添加一個(gè)DOM img對象到Canvas對象中

var source = document.getElementById("source");tempContext.drawImage(source, 0, 0, canvas.width,canvas.height);

3、如何從Canvas對象中獲取預(yù)定數(shù)據(jù)

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;

4、如何對DOM對象實(shí)現(xiàn)鼠標(biāo)ClickEvent綁定

function bindButtonEvent(element, type, handler) {  if(element.addEventListener){       element.addEventListener(type, handler,**false**);    }else{       element.attachEvent('on'+type, handler);// for IE6,7,8   } }

5、如何調(diào)用實(shí)現(xiàn)的gfilter API完成濾鏡功能

 //導(dǎo)入API文件gfilter.colorInvertProcess(binaryData, len); //調(diào)用 API

6、瀏覽器支持：IE，F(xiàn)F，Chrome上測試通過，其中IE上支持通過以下標(biāo)簽實(shí)現(xiàn)：

效果演示：

應(yīng)用程序源代碼：

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源代碼：