微客导航 » 文章资讯 » JS实现马赛克图片效果完整示例

JS实现马赛克图片效果完整示例

2023-08-24 15:33:05 420

本文实例讲述了JS实现马赛克图片效果。分享给大家供大家参考，具体如下：

整体逻辑：获取oldImg图片的像素信息，以5*5为单位，在5*5单位中取到一个随机像素并赋值给5*5中的所有像素点，加以循环，以实现马赛克效果。





www.nhooo.comJS图片马赛克

*{
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

更多关于JavaScript相关内容还可查看本站专题：《JavaScript+HTML5特效与技巧汇总》、《JavaScript图形绘制技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

返回顶部
3162201930
czq8825@qq.com

JS实现马赛克图片效果完整示例

热门推荐

随机推荐