您的位置：首页 > 其它

canvas图像处理实现马赛克效果

2012-08-29 21:24 471 查看

　　马赛克是我们经常在视频中会见到的，本例通过canvas访问图像像素值并且更改使之呈现成马赛克效果，用以遮挡不想让大家看到的地方（因为是对图像的处理，本地无法看到效果，需要把实例上传到服务器上（本地服务器也可以））。

效果对比图：

View Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>canvas马赛克</title>
</head>

<body>
<canvas id='mycanvas'></canvas>
<script>
var image=new Image();
image.src='images/video.jpg';
var canvas=document.getElementById('mycanvas');
var ctx=canvas.getContext('2d');
/*
* 需要等到图片加载完毕之后再进行像素处理
*/
image.onload=function (){
//设置画布大小为图像的大小
canvas.width=image.width;
canvas.height=image.height;
ctx.drawImage(image,0,0);//画图
var imagedata=ctx.getImageData(0,0,80,30);//获取需要处理的图像大小
var pixels=imagedata.data;//获取目标图像的所有像素
/*
* 开始规划马赛克区域，设置马赛克区域为3行8列
*/
var rows=3;
var cols=8;
//计算每块马赛克的宽和高
var r_wid=imagedata.width/cols;
var c_hei=imagedata.height/rows;
/*
* 开始获取马赛克区域的像素并且设置每个像素的颜色和透明度，
* 第一个for循环遍历每一行的块，第二个for循环遍历每一列的块，
* 第三个和第四个for循环遍历当前块的像素行和像素列
*/
for(var r=0;r<rows;r++){
for(var c=0;c<cols;c++){
//设置每块的颜色
var red=Math.round(Math.random()*255);
var green=Math.round(Math.random()*255);
var blue=Math.round(Math.random()*255);
for(var rs=0;rs<r_wid;rs++){
for(var cs=0;cs<c_hei;cs++){
//X和Y是计算出的真是的像素位置
var X=(c*r_wid)+cs;
var Y=(r*c_hei)+rs;
/*
* 通过pos=Y*(imagedata.width*4)+(X*4);这个公式用于计算当前像素的第一个值（每个像素由4个值组成：rgba即红绿蓝3个颜色值和透明度，均是由0-255组成），
* imagedata.width*4计算出所处理图像区域每行的像素总长度，Y是当前像素列，两者相乘就可以获得当前像素所处行的初始值，X*4是当前像素的列位置；
* 原公式是pos=（Y-1）*(imagedata.width*4)+(X*4);Y-1可以将画布使用的坐标系统转化成像素数组所用的从0开始的坐标系统，由于本例坐标位置就是从0开始计算的，所以Y不用减1
*/
var pos=Y*(imagedata.width*4)+(X*4);
pixels[pos]=red;//当前像素的第一个值
pixels[pos+1]=green;//当前像素的第二个值
pixels[pos+2]=blue;//当前像素的第三个值
pixels[pos+3]=255;//当前像素的第四个值
}
}
}
}
ctx.putImageData(imagedata,30,25);//输出像素值
}

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航