国精产品一区一区三区在线,国产激情无码视频在线播放性色

文章插圖
前端小試牛刀，實(shí)現(xiàn)了六款簡(jiǎn)單常見(jià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.總體：模擬了物體在鏡子中與之對(duì)應(yīng)的效果。
雜項(xiàng)準(zhǔn)備1、如何獲取Canvas 2d context對(duì)象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對(duì)象到Canvas對(duì)象中var source = document.getElementById("source");tempContext.drawImage(source, 0, 0, canvas.width,canvas.height);3、如何從Canvas對(duì)象中獲取預(yù)定數(shù)據(jù)var canvas = document.getElementById("target");var len = canvas.width * canvas.height * 4;var canvasData = https://www.520longzhigu.com/diannao/tempContext.getImageData(0, 0, canvas.width, canvas.height);var binaryData = canvasData.data;4、如何對(duì)DOM對(duì)象實(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完成濾鏡功能<scriptsrc=https://www.520longzhigu.com/diannao/*"gloomyfishfilter.js"*></script> //導(dǎo)入API文件gfilter.colorInvertProcess(binaryData, len); //調(diào)用 API6、瀏覽器支持：IE，F(xiàn)F，Chrome上測(cè)試通過(guò)，其中IE上支持通過(guò)以下標(biāo)簽實(shí)現(xiàn)：<meta http-equiv="X-UA-Compatible"*content=*"chrome=IE8"> 效果演示：
應(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源代碼：
<!DOCTYPE html><html><head><meta http-equiv="X-UA-Compatible" content="chrome=IE8"><meta http-equiv="Content-type" content="text/html;charset=UTF-8"><title>Canvas Filter Demo</title><link rel="stylesheet" /><script src="https://www.520longzhigu.com/diannao/gloomyfishfilter.js"></scrip></head><body><h1>HTML Canvas Image Process - By Gloomy Fish</h1><div id="svgContainer"><div id="sourceDiv"><img id="source" src="https://www.520longzhigu.com/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">灰色調(diào)</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 contextwindow.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 HTML5 compatible browser.");return;}// get 2D context of canvas and draw imagetempContext = canvas.getContext("2d");tempContext.drawImage(source, 0, 0, canvas.width, canvas.height);// initialization actionsvar 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 eventbindButtonEvent(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 IE6,7,8}}function invertColor() {var canvas = document.getElementById("target");var len = canvas.width * canvas.height * 4;var canvasData = https://www.520longzhigu.com/diannao/tempContext.getImageData(0, 0, canvas.width, canvas.height);var binaryData = canvasData.data;// Processing all the pixelsgfilter.colorInvertProcess(binaryData, len);// Copying back canvas data to canvastempContext.putImageData(canvasData, 0, 0);}function adjustColor() {var canvas = document.getElementById("target");var len = canvas.width * canvas.height * 4;var canvasData = https://www.520longzhigu.com/diannao/tempContext.getImageData(0, 0, canvas.width, canvas.height);var binaryData = canvasData.data;// Processing all the pixelsgfilter.colorAdjustProcess(binaryData, len);// Copying back canvas data to canvastempContext.putImageData(canvasData, 0, 0);}function blurImage() {var canvas = document.getElementById("target");var len = canvas.width * canvas.height * 4;var canvasData = https://www.520longzhigu.com/diannao/tempContext.getImageData(0, 0, canvas.width, canvas.height);// Processing all the pixelsgfilter.blurProcess(tempContext, canvasData);// Copying back canvas data to canvastempContext.putImageData(canvasData, 0, 0);}function fudiaoImage() {var canvas = document.getElementById("target");var len = canvas.width * canvas.height * 4;var canvasData = https://www.520longzhigu.com/diannao/tempContext.getImageData(0, 0, canvas.width, canvas.height);// Processing all the pixelsgfilter.reliefProcess(tempContext, canvasData);// Copying back canvas data to canvastempContext.putImageData(canvasData, 0, 0);}function kediaoImage() {var canvas = document.getElementById("target");var len = canvas.width * canvas.height * 4;var canvasData = https://www.520longzhigu.com/diannao/tempContext.getImageData(0, 0, canvas.width, canvas.height);// Processing all the pixelsgfilter.diaokeProcess(tempContext, canvasData);// Copying back canvas data to canvastempContext.putImageData(canvasData, 0, 0);}function mirrorImage() {var canvas = document.getElementById("target");var len = canvas.width * canvas.height * 4;var canvasData = https://www.520longzhigu.com/diannao/tempContext.getImageData(0, 0, canvas.width, canvas.height);// Processing all the pixelsgfilter.mirrorProcess(tempContext, canvasData);// Copying back canvas data to canvastempContext.putImageData(canvasData, 0, 0);}濾鏡源代碼（gloomyfishfilter.js）：

以上關(guān)于本文的內(nèi)容，僅作參考！溫馨提示：如遇健康、疾病相關(guān)的問(wèn)題，請(qǐng)您及時(shí)就醫(yī)或請(qǐng)專業(yè)人士給予相關(guān)指導(dǎo)!

「愛(ài)刨根生活網(wǎng)」www.malaban59.cn小編還為您精選了以下內(nèi)容，希望對(duì)您有所幫助：

javascript特效代碼大全 js特效教程