JS实现马赛克图片效果完整示例
本文实例讲述了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程序设计有所帮助。
相关推荐
-
js放大镜放大图片效果
我们 js图片放大镜 body { background: #222; overflow: hidden; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; } #screen span { position:absolute; overflow:hidden; border:#FFF solid 1px; background:#FFF; } #screen img{ position:absolute; le
-
js实现图片漂浮效果的方法
本文实例讲述了js实现图片漂浮效果的方法.分享给大家供大家参考.具体分析如下: 描述:打开网页就看到不停在飘动的图片,点击连接到其他页面:起到着重强调的效果! 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>test</title>
-
用javascript实现的图片马赛克后显示并切换加文字功能
<script language="JavaScript1.1"> var slidespeed=3000 var slideimages=new Array("http://www.blueidea.com/articleimg/upload/2006/3/5/2482150_1_7.jpg","http://www.blueidea.com/articleimg/upload/2006/3/5/2482150_2_1.jpg",&
-
JavaScript 图片放大镜（可拖放、缩放效果）第1/4页
前些日子突然想做一个透镜效果,就突然想到了这个效果,于是找出当年"珍藏"的代码决定一尝所愿. 前言:这个程序主要分三部分:层的拖放.层的缩放.图片切割(包括预览). 其中层的拖放是很常见的效果,层的缩放有点难度,图片切割看着炫其实原理也很简单. 不过在实现的过程中也学习到很多以前不知道的东西,下面都会说明,希望大家从中也能学到东西. 原理: [拖放程序] 基本原理很简单,不知道的看代码就明白,其中参考了越兔和BlueDestiny的相关文章. 下面说一下比较有用的地方: [范围限制]
-
JS实现图片高斯模糊切换效果的焦点图实例
焦点图相信对大家来说都不陌生,本文给大家分享的是一种图片高斯模糊切换效果的焦点图,下面话不多说了,来看看实现的效果图和实例代码吧. 效果图 实例代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> @-webkit-keyframes show { 0%{ opacity:1; -webk
-
纯JS实现旋转图片3D展示效果
CSS: <style type="text/css"> #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute;height:40px;width:60px;background:#999999;border:1px solid #eeeeee;cursor:pointer;}</style> Html: input id="l" type
-
Javascript实现图片加载从模糊到清晰显示的方法
1.背景介绍 在网络相册应用中用户查看照片是最朴素的需求,当网络比较慢的时候查看照片等待的时间是比较长的,用户体验会很差. 2.现状 现在加载照片的方法主要有一下两种: (1)最原始的方式在html页面直接用img标签加载显示照片.该方法在网络速度比较慢或者要显示的照片比较大的时候会页面出现空白的等待过程,并且不能开始给用户看到照片大概的情况,用户体验比较不好 (2)在html页面先用img标签加载显示照片的缩略图,同时用javascript隐藏的加载照片的原图,等照片大图加载完成后再将原图显示
-
用javascript实现图片马赛克后显示并切换
<script language="JavaScript1.1"> var slidespeed=3000 //specify images var slideimages=new Array("http://www.blueidea.com/articleimg/upload/2006/3/5/2482150_1_7.jpg","http://www.blueidea.com/articleimg/upload/2006/3/5/248215
-
js图片模糊切换显示特效的方法
本文实例讲述了js图片模糊切换显示特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>一款图片模糊切换显示效果</title> <body> <script language="JavaScript1.1"> <!-- var slidespeed=3000 var slideimages=new Array("/images/m01.jpg",&q
-
JavaScript图片放大镜效果代码[代码比较简单]
#div1 { width:304px; height:222px; position:relative; margin:30px auto 0px;} #div1 img{width:304px; height:222px;} #div1 span { width:100px; height:100px; background:red; left:0px;top:0px; position:absolute; display:none; filter:alpha(opacity:20); op
-
js实现点击左右按钮轮播图片效果实例
本文实例讲述了js实现点击左右按钮轮播图片效果的方法.分享给大家供大家参考.具体实现方法如下: $(function () { var index = 1; var pPage = 1; var $v_citemss = $(".citemss"); var $v_show = $v_citemss.find("ul"); v_width = $v_citemss.width();//图片展示区外围div的大小 //注:若为整数,前边不能再加var,否则会被提示un