纯JavaScript实现HTML5 Canvas六种特效滤镜
纯Script实现HTML5 Canvas六种特效滤镜
小试牛刀，实现了六款简单常见HTML5 Canvas特效滤镜，并且封装成一个纯
可调用的API文件gloomyfishfilter.js。支持的特效滤镜分别为：
1.&&&&& 反色
2.&&&&& 灰色调
3.&&&&& 模糊
4.&&&&& 浮雕
5.&&&&& 雕刻
6.&&&&& 镜像
滤镜原理解释：
1.&&&&& 反色：获取一个像素点RGB值r, g, b则新的RGB值为(255-r, 255-g, 255-b)
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.&&&&& 镜像：模拟了物体在镜子中与之对应的效果。
1.&&&&&&& 如何获取Canvas 2d context对象
var canvas = document.getElementById(&target&);
canvas.width = source.clientW
canvas.height = source.clientH
if(!canvas.getContext) {
&&& console.log(&Canvas not supported. Please install a HTML5compatible browser.&);
// get 2D context of canvas and draw image
tempContext = canvas.getContext(&2d&);
2.&&&&&&& 如何绘制一个DOM img对象到Canvas对象中
var source = document.getElementById(&source&);
tempContext.drawImage(source, 0, 0, canvas.width,canvas.height);
3.&&&&&&& 如何从Canvas对象中获取像素数据
var canvas = document.getElementById(&target&);
varlen = canvas.width * canvas.height * 4;
var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height);
var binaryData = canvasData.
4.&&&&&&& 如何对DOM对象实现鼠标Click事件绑定
function bindButtonEvent(element, type, handler)
if(element.addEventListener){
&&&&&& element.addEventListener(type, handler,false);
&&& }else {
&&&&&& element.attachEvent('on'+type, handler);// for IE6,7,8
5.&&&&&&& 如何调用实现的gfilter API完成滤镜功能
&scriptsrc=&gloomyfishfilter.js&&&/script& //导入API文件
gfilter.colorInvertProcess(binaryData, len); //调用 API
6.&&&&&&& 支持：IE, FF, Chrome上测试通过，其中IE上支持通过以下标签实现：
&meta http-equiv=&X-UA-Compatible&content=&chrome=IE8&&
效果演示：
应用程序源代码：
#svgContainer {&
&&& width:800&
&&& height:600&
&&& background-color:#EEEEEE;&
&&&&&&&&&&
#sourceDiv { float: border: 2px solid blue}&&
#targetDiv { float:border: 2px solid red}&&
#svgContainer {
&width:800
&height:600
&background-color:#EEEEEE;
#sourceDiv { float: border: 2px solid blue}
#targetDiv { float:border: 2px solid red} filter1.html中HTML源代码：
&!DOCTYPE html&&
&meta http-equiv=&X-UA-Compatible& content=&chrome=IE8&&&
&meta http-equiv=&Content-type& content=&text/charset=UTF-8&&&
&title&Canvas Filter Demo&/title&&
&link href=&default.css& rel=&stylesheet& /&&
&script src=&gloomyfishfilter.js&&&/scrip&&
&&& &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&&
&!DOCTYPE html&
&meta http-equiv=&X-UA-Compatible& content=&chrome=IE8&&
&meta http-equiv=&Content-type& content=&text/charset=UTF-8&&
&title&Canvas Filter Demo&/title&
&link href=&default.css& rel=&stylesheet& /&
&script src=&gloomyfishfilter.js&&&/scrip&
&&h1&HTML Canvas Image Process - By Gloomy Fish&/h1&
&&div id=&svgContainer&&
&&&div id=&sourceDiv&&
&&&&img id=&source& src=&../test.png& /&
&&&div id=&targetDiv&&
&&&&canvas id=&target&&&/canvas&
&&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&
filter1.html中JavaScript源代码：
[javascript]
var tempContext = // global variable 2d context&&
window.onload = function() {&
&&& var source = document.getElementById(&source&);&
&&& var canvas = document.getElementById(&target&);&
&&& canvas.width = source.clientW&
&&& canvas.height = source.clientH&
&&& if (!canvas.getContext) {&
&&&&&&& console.log(&Canvas not supported. Please install a HTML5 compatible browser.&);&
&&& // 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 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 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.&
&&&&&& // 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.&
&&&&&& // 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);&
&&var tempContext = // global variable 2d context
&&window.onload = function() {
&&&var source = document.getElementById(&source&);
&&&var canvas = document.getElementById(&target&);
&&&canvas.width = source.clientW
&&&canvas.height = source.clientH
&&&if (!canvas.getContext) {
&&&&&& console.log(&Canvas not supported. Please install a HTML5 compatible browser.&);
&&&// 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 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 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.
&&&&&&&& // 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.
&&&&&&&& // 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)：
[javascript]
var gfilter = {&
&&& type: &canvas&,&
&&& name: &filters&,&
&&& author: &zhigang&,&
&&& getInfo: function () {&
&&&&&&& return this.author + ' ' + this.type + ' ' + this.&
&&&& * 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 & 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 & 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.set(src.data);&
&&&& * 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. x++) {&&&&&
&&&&&&&&&&& for ( var y = 0; y & tempCanvasData. 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 +&
&&&&&&&&&&&&&&&&&&& if(colOff &0 || colOff &= tempCanvasData.width) {&
&&&&&&&&&&&&&&&&&&&&&&& colOff = 0;&
&&&&&&&&&&&&&&&&&&& }&
&&&&&&&&&&&&&&&&&&& for(var subRow=-2; subRow&=2; subRow++) {&
&&&&&&&&&&&&&&&&&&&&&&& var rowOff = subRow +&
&&&&&&&&&&&&&&&&&&&&&&& 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 +=&
&&&&&&&&&&&&&&&&&&&&&&& sumgreen +=&
&&&&&&&&&&&&&&&&&&&&&&& sumblue +=&
&&&&&&&&&&&&&&&&&&& }&
&&&&&&&&&&&&&&& }&
&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&& // 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] = // Red channel&&&&&&
&&&&&&&&&&&&&&& canvasData.data[idx + 1] = // Green channel&&&&&&
&&&&&&&&&&&&&&& canvasData.data[idx + 2] = // 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);&
&&&&&&&&&&&&&&& ng = (ng & 0) ? 0 : ((ng &255) ? 255 : ng);&
&&&&&&&&&&&&&&& nb = (nb & 0) ? 0 : ((nb &255) ? 255 : nb);&
&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&& // assign new pixel value&&&&&&
&&&&&&&&&&&&&&& canvasData.data[idx + 0] = // Red channel&&&&&&
&&&&&&&&&&&&&&& canvasData.data[idx + 1] = // Green channel&&&&&&
&&&&&&&&&&&&&&& canvasData.data[idx + 2] = // 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 bidx = ((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] = // Red channel&&&&&&
&&&&&&&&&&&&&&& canvasData.data[idx + 1] = // Green channel&&&&&&
&&&&&&&&&&&&&&& canvasData.data[idx + 2] = // 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. x++) // column&&
&&&&&&& {&&&&&
&&&&&&&&&&& for ( var y = 0; y & tempCanvasData. y++) // row&&
&&&&&&&&&&& {&&&&&
&&&&&&&&&&&&&&& // Index of the pixel in the array&&&&&&
&&&&&&&&&&&&&&& var idx = (x + y * tempCanvasData.width) * 4;&&&&&&&&
&&&&&&&&&&&&&&& var midx = (((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&&&&&&
&&&&&&&&&&& }&
&&&&&&& }&
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467142',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'