JS实现马赛克图片效果完整示例
程序员文章站
2022-03-23 12:57:31
本文实例讲述了js实现马赛克图片效果。分享给大家供大家参考，具体如下：
整体逻辑：获取oldimg图片的像素信息，以5*5为单位，在5*5单位中取到一个随机像素并赋值给5...
本文实例讲述了js实现马赛克图片效果。分享给大家供大家参考，具体如下：
整体逻辑：获取oldimg图片的像素信息，以5*5为单位，在5*5单位中取到一个随机像素并赋值给5*5中的所有像素点，加以循环，以实现马赛克效果。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.jb51.net js图片马赛克</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: grey;
text-align: center;
}
#mycanvas {
background-color: rgba(250, 0, 0, 0.3);
}
</style>
</head>
<body>
<canvas id="mycanvas" width="500" height="400"></canvas>
</body>
<script type="text/javascript">
window.onload = function() {
var mycanvas = document.getelementbyid('mycanvas');
var painting = mycanvas.getcontext('2d');
//生成一个图片节点
var imgnode = new image();
imgnode.src = '1.jpg';
//调用函数
drawimg(imgnode);
function drawimg(imgnode) {
//图片加载后执行马赛克实现语句：5个一组取到随机像素赋给新图里的五个一组
imgnode.onload = function() {
painting.drawimage(imgnode, 0, 0, 250, 400);
var size = 5;
//获取老图所有像素点
var oldimg = painting.getimagedata(0, 0, 250, 400)
//创建新图像素对象
var newimg = painting.createimagedata(250, 400)
for(var i = 0; i < oldimg.width; i++) {
for(var j = 0; j < oldimg.height; j++) {
//从5*5中获取单个像素信息
var color = getpxinfo(oldimg, math.floor(i * size + math.random() * size), math.floor(j * size + math.random() * size))
//写入单个像素信息
for(var a = 0; a < size; a++) {
for(var b = 0; b < size; b++) {
// (a,b)
setpxinfo(newimg, i * size + a, j * size + b, color);
}
}
}
}
painting.putimagedata(newimg, 250, 0)
}
}
//读取单个像素信息
function getpxinfo(imgdate, x, y) {
var colorarr = [];
var width = 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]
return colorarr;
}
//写入单个像素信息
function setpxinfo(imgdate, x, y, colors) {
//（x,y） 之前有多少个像素点 == width*y + x
var width = 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];
}
}
</script>
</html>
更多关于javascript相关内容还可查看本站专题：《javascript+html5特效与技巧汇总》、《javascript图形绘制技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。