主要介绍了JS实现马赛克图片效果,结合完整实例形式分析了JavaScript基于HTML5 canvas图形元素绘制实现马赛克效果相关操作技巧,需要的朋友可以参考下
本文实例讲述了JS实现马赛克图片效果。分享给大家供大家参考，具体如下：
整体逻辑：获取oldImg图片的像素信息，以5*5为单位，在5*5单位中取到一个随机像素并赋值给5*5中的所有像素点，加以循环，以实现马赛克效果。html>
JS图片马赛克编程之家
*{
margin:0;
padding:0;
}
body{
background-color:grey;
text-align:center;
}
#myCanvas{
background-color:rgba(250,0,0,0.3);
}
window.onload=function(){
varmyCanvas=document.getElementById('myCanvas');
varpainting=myCanvas.getContext('2d');
//生成一个图片节点
varimgNode=newImage();
imgNode.src='1.jpg';
//调用函数
drawImg(imgNode);
functiondrawImg(imgNode){
//图片加载后执行马赛克实现语句：5个一组取到随机像素赋给新图里的五个一组
imgNode.onload=function(){
painting.drawImage(imgNode,0,0,250,400);
varsize=5;
//获取老图所有像素点
varoldImg=painting.getImageData(0,0,250,400)
//创建新图像素对象
varnewImg=painting.createImageData(250,400)
for(vari=0;i
for(varj=0;j
//从5*5中获取单个像素信息
varcolor=getPxInfo(oldImg,Math.floor(i*size+Math.random()*size),Math.floor(j*size+Math.random()*size))
//写入单个像素信息
for(vara=0;a
for(varb=0;b
//(a,b)
setPxInfo(newImg,i*size+a,j*size+b,color);
}
}
}
}
painting.putImageData(newImg,250,0)
}
}
//读取单个像素信息
functiongetPxInfo(imgDate,x,y){
varcolorArr=[];
varwidth=imgDate.width;
colorArr[0]=imgDate.data[(width*y+x)*4+0]
colorArr[1]=imgDate.data[(width*y+x)*4+1]
colorArr[2]=imgDate.data[(width*y+x)*4+2]
colorArr[3]=imgDate.data[(width*y+x)*4+3]
returncolorArr;
}
//写入单个像素信息
functionsetPxInfo(imgDate,x,y,colors){
//(x,y)之前有多少个像素点==width*y+x
varwidth=imgDate.width;
imgDate.data[(width*y+x)*4+0]=colors[0];
imgDate.data[(width*y+x)*4+1]=colors[1];
imgDate.data[(width*y+x)*4+2]=colors[2];
imgDate.data[(width*y+x)*4+3]=colors[3];
}
}
总结
如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
小编个人微信号 jb51ccc
喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！
