马赛克是我们经常在视频中会见到的，本例通过canvas访问图像像素值并且更改使之呈现成马赛克效果，用以遮挡不想让大家看到的地方（因为是对图像的处理，本地无法看到效果，需要把实例上传到服务器上（本地服务器也可以））。
效果对比图：
本例就是利用canvas处理图像像素，获取当前像素的具体位置，然后做一定的处理，看一下代码吧，里面有详尽的注释！
View Code
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>canvas马赛克</title> 6 </head> 7 8 <body> 9 <canvas id='mycanvas'></canvas> 10 <script> 11 var image=new Image(); 12 image.src='images/video.jpg'; 13 var canvas=document.getElementById('mycanvas'); 14 var ctx=canvas.getContext('2d'); 15 /* 16 * 需要等到图片加载完毕之后再进行像素处理 17 */ 18 image.onload=function (){ 19 //设置画布大小为图像的大小 20 canvas.width=image.width; 21 canvas.height=image.height; 22 ctx.drawImage(image,0,0);//画图 23 var imagedata=ctx.getImageData(0,0,80,30);//获取需要处理的图像大小 24 var pixels=imagedata.data;//获取目标图像的所有像素 25 /* 26 * 开始规划马赛克区域，设置马赛克区域为3行8列 27 */ 28 var rows=3; 29 var cols=8; 30 //计算每块马赛克的宽和高 31 var r_wid=imagedata.width/cols; 32 var c_hei=imagedata.height/rows; 33 /* 34 * 开始获取马赛克区域的像素并且设置每个像素的颜色和透明度， 35 * 第一个for循环遍历每一行的块，第二个for循环遍历每一列的块， 36 * 第三个和第四个for循环遍历当前块的像素行和像素列 37 */ 38 for(var r=0;r<rows;r++){ 39 for(var c=0;c<cols;c++){ 40 //设置每块的颜色 41 var red=Math.round(Math.random()*255); 42 var green=Math.round(Math.random()*255); 43 var blue=Math.round(Math.random()*255); 44 for(var rs=0;rs<r_wid;rs++){ 45 for(var cs=0;cs<c_hei;cs++){ 46 //X和Y是计算出的真是的像素位置 47 var X=(c*r_wid)+cs; 48 var Y=(r*c_hei)+rs; 49 /* 50 * 通过pos=Y*(imagedata.width*4)+(X*4);这个公式用于计算当前像素的第一个值（每个像素由4个值组成：rgba即红绿蓝3个颜色值和透明度，均是由0-255组成）， 51 * imagedata.width*4计算出所处理图像区域每行的像素总长度，Y是当前像素列，两者相乘就可以获得当前像素所处行的初始值，X*4是当前像素的列位置； 52 * 原公式是pos=（Y-1）*(imagedata.width*4)+(X*4);Y-1可以将画布使用的坐标系统转化成像素数组所用的从0开始的坐标系统，由于本例坐标位置就是从0开始计算的，所以Y不用减1 53 */ 54 var pos=Y*(imagedata.width*4)+(X*4); 55 pixels[pos]=red;//当前像素的第一个值 56 pixels[pos+1]=green;//当前像素的第二个值 57 pixels[pos+2]=blue;//当前像素的第三个值 58 pixels[pos+3]=255;//当前像素的第四个值 59 } 60 } 61 } 62 } 63 ctx.putImageData(imagedata,30,25);//输出像素值 64 } 65 66 </script> 67 </body> 68 </html>
1397
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
