版权声明：本文纯属原创，未经同意请勿转载。 https://blog.csdn.net/beiluo77/article/details/88354056
H5canvas 3：图像操作（滤镜）
canvas图像操作，这里我主要用了
drawImage()
这个方法
新建一个画布，用不同的按钮实现不同的滤镜效果。
html代码：
<h2>图像操作</h2>
<img src="img/12.jpg" width="100%" id="pic"/>
<canvas id="mycan" width="400" height="400"></canvas>
<!--<canvas id="imgcan" width="400" height="400"></canvas>-->
<div id="btn">
<input type="button" value="灰度滤镜" id="grayBtn" />
<input type="button" value="黑白滤镜" id="blackBtn" />
<input type="button" value="底片效果" id="negativeBtn" />
<input type="button" value="红色滤镜" id="redBtn" />
</div>
css代码：
@charset "utf-8";
body{
margin: 0;
padding: 0;
text-align: center;
}
#mycan{
background: url(../img/12.jpg);
background-position: 50% 50%;
background-size: 100%;
background-repeat: no-repeat;
}
img{
display: none;
}
button{
text-align: center;
position: relative;
padding: 10px 10px 10px 10px;
}
接下来正式开始对滤镜的实现：
window.function(){
var can=document.getElementById("mycan");
var ctx=can.getContext("2d");
var img=document.getElementById("pic");
grayBtn=document.getElementById("grayBtn");
blackBtn=document.getElementById("blackBtn");
negativeBtn=document.getElementById("negativeBtn");
redBtn=document.getElementById("redBtn");
//var imgctx=document.getElementById("imgcan").getContext("2d");
//调整画布大小
can.width=img.width;
can.height=img.height;
//窗口大小调整
window.onresize=function(){
can.width=img.width;
can.height=img.height;
}
//灰度
grayBtn.onclick=function(){
//鼠标按下
can.onmousedown=function(e){
var ex=e.offsetX;
var ey=e.offsetY;
var imgWidth=img.width;
var imgHeight=img.height;
var picWidth=img.naturalWidth;
var picHeight=img.naturalHeight;
var x=ex*picWidth/imgWidth;
var y=ey*picHeight/imgHeight;
ctx.save();//保存画布
ctx.beginPath();
ctx.arc(ex,ey,100,0,2*Math.PI,true);
ctx.closePath();
ctx.clip();
ctx.drawImage(img,x-100,y-100,200,200,ex-100,ey-100,200,200);
var imgdata=ctx.getImageData(ex-100,ey-100,200,200);
//console.log(imgdata);
imgdata=toGray(imgdata);//灰白滤镜
ctx.putImageData(imgdata, x-100,y-100,0,0,200,200);
}
}
//黑白
blackBtn.onclick=function(){
//鼠标按下
can.onmousedown=function(e){
var ex=e.offsetX;
var ey=e.offsetY;
var imgWidth=img.width;
var imgHeight=img.height;
var picWidth=img.naturalWidth;
var picHeight=img.naturalHeight;
var x=ex*picWidth/imgWidth;
var y=ey*picHeight/imgHeight;
ctx.save();//保存画布
ctx.beginPath();
ctx.arc(ex,ey,100,0,2*Math.PI,true);
ctx.closePath();
ctx.clip();
ctx.drawImage(img,x-100,y-100,200,200,ex-100,ey-100,200,200);
var imgdata=ctx.getImageData(ex-100,ey-100,200,200);
//console.log(imgdata);
imgdata=toBlack(imgdata);//黑白滤镜
ctx.putImageData(imgdata, x-100,y-100,0,0,200,200);
}
}
//底片
negativeBtn.onclick=function(){
//鼠标按下
can.onmousedown=function(e){
var ex=e.offsetX;
var ey=e.offsetY;
var imgWidth=img.width;
var imgHeight=img.height;
var picWidth=img.naturalWidth;
var picHeight=img.naturalHeight;
var x=ex*picWidth/imgWidth;
var y=ey*picHeight/imgHeight;
ctx.save();//保存画布
ctx.beginPath();
ctx.arc(ex,ey,100,0,2*Math.PI,true);
ctx.closePath();
ctx.clip();
ctx.drawImage(img,x-100,y-100,200,200,ex-100,ey-100,200,200);
var imgdata=ctx.getImageData(ex-100,ey-100,200,200);
//console.log(imgdata);
imgdata=toNegative(imgdata);//底片效果
ctx.putImageData(imgdata, x-100,y-100,0,0,200,200);
}
}
//红色
redBtn.onclick=function(){
//鼠标按下
can.onmousedown=function(e){
var ex=e.offsetX;
var ey=e.offsetY;
var imgWidth=img.width;
var imgHeight=img.height;
var picWidth=img.naturalWidth;
var picHeight=img.naturalHeight;
var x=ex*picWidth/imgWidth;
var y=ey*picHeight/imgHeight;
ctx.save();//保存画布
ctx.beginPath();
ctx.arc(ex,ey,100,0,2*Math.PI,true);
ctx.closePath();
ctx.clip();
ctx.drawImage(img,x-100,y-100,200,200,ex-100,ey-100,200,200);
var imgdata=ctx.getImageData(ex-100,ey-100,200,200);
//console.log(imgdata);
imgdata=toRed(imgdata);//红色滤镜
ctx.putImageData(imgdata, x-100,y-100,0,0,200,200);
}
}
//鼠标放开
can.onmouseup=function(e){
ctx.restore();//恢复
ctx.clearRect(0,0,can.width,can.height);
}
//灰白滤镜
function toGray(imgdata){
for(var i=0;i<imgdata.data.length-4;i=i+4){
var r=imgdata.data[i];
var g=imgdata.data[i+1];
var b=imgdata.data[i+2];
var rgb=(r*0.3+g*0.5+b*0.11);
imgdata.data[i]=rgb;
imgdata.data[i+1]=rgb;
imgdata.data[i+2]=rgb;
}
return imgdata;
}
//黑白滤镜
function toBlack(imgdata){
for(var i=0;i<imgdata.data.length-4;i=i+4){
var r=imgdata.data[i];
var g=imgdata.data[i+1];
var b=imgdata.data[i+2];
var rgb=(r+g+b)/3;
if(rgb<100){
rgb=0;
}
else{
rgb=255;
}
imgdata.data[i]=rgb;
imgdata.data[i+1]=rgb;
imgdata.data[i+2]=rgb;
}
return imgdata;
}
//底片效果
function toNegative(imgdata){
for(var i=0;i<imgdata.data.length-4;i=i+4){
var r=255-imgdata.data[i];
var g=255-imgdata.data[i+1];
var b=255-imgdata.data[i+2];
imgdata.data[i]=r;
imgdata.data[i+1]=g;
imgdata.data[i+2]=b;
}
return imgdata;
}
//红色滤镜
function toRed(imgdata){
for(var i=0;i<imgdata.data.length-4;i=i+4){
var r=imgdata.data[i]*3;
var g=imgdata.data[i+1];
var b=imgdata.data[i+2];
imgdata.data[i]=r>255?255:r;
imgdata.data[i]=r;
imgdata.data[i+1]=g;
imgdata.data[i+2]=b;
}
return imgdata;
}
}
关于滤镜，这里要提到**
getImageData() 方法
我们需要通过 getImageData() 复制画布上指定矩形的像素数据，然后通过 putImageData() 将图像数据放回画布