canvas滤镜之简单的取反

canvas滤镜之简单的取反

自己学习了一下canvas滤镜，编写一个简单的小界面，嘿嘿！

注释都在里面啦啦啦，感兴趣的来瞅瞅哦😯  欢迎指正

css样式：

#wrap{

width:600px;

height:600px;

background-color:#EEEEEE;

}

#sourceDiv{

float:left;

border:2pxsolidblue;

}

#canvasDiv{

float:right;

border:2pxsolidred;

}

body里面

js部分

window.onload=function() {

varimg=document.getElementById("img");

varcanvas=document.getElementById("canvas");

varbtn=document.getElementById("btn");

canvas.width=img.clientWidth;

canvas.height=img.clientHeight;

pen=canvas.getContext("2d");

pen.drawImage(img,0,0, canvas.width, canvas.height);//把图片放在画布上

}

//getImageData(x,y,width,height) 复制画布上指定矩形的像素数据 然后通过putImageData()将图像数据放回画布：

//返回ImageData对象，该对象拷贝了画布指定矩形的像素数据

//对于 ImageData 对象中的每个像素，都存在着四方面的信息rgba,

//color/alpha 信息以数组形式存在，并存储于 ImageData 对象的 data 属性中

//即 RGBA 值 eg:red=ImageData.data[0];

btn.onclick=function() {

varimgData=pen.getImageData(0,0, canvas.width, canvas.height);

varlen=canvas.width*canvas.height*4;

//遍历imgData.data改变像素值

for(vari=0; i

//每一个像素的color/alpha 信息

//取反色

imgData.data[i]=255-imgData.data[i];

imgData.data[i+1]=255-imgData.data[i+1];

imgData.data[i+2]=255-imgData.data[i+2];

imgData.data[i+3]=255;

}

// 将图像数据imgData放回画布

//putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

//在画布上的位置x y在画布上放置图像的位置水平位置偏移量 垂直位置偏移量图像宽度

pen.putImageData(imgData,0,0);

}