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


Posted in Javascript onApril 13, 2019

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>3water.com 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程序设计有所帮助。

Javascript 相关文章推荐
jquery easyui的tabs使用时的问题
Mar 23 Javascript
jquery阻止冒泡事件使用模拟事件
Sep 06 Javascript
js中小数转换整数的方法
Jan 26 Javascript
jquery实现焦点图片随机切换效果的方法
Mar 12 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
Jun 20 Javascript
js+css3制作时钟特效
Oct 16 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
什么是Vue.js框架 为什么选择它?
Oct 17 Javascript
Vue 获取数组键名的方法
Jun 21 Javascript
vue如何安装使用Quill富文本编辑器
Sep 21 Javascript
0基础学习前端开发的一些建议
Jul 14 Javascript
详解前端任务构建利器Gulp.js使用指南
Apr 30 Javascript
ES6入门教程之let、const的使用方法
Apr 13 #Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 #Javascript
微信小程序template模版的使用方法
Apr 13 #Javascript
vue基于viewer实现的图片查看器功能
Apr 12 #Javascript
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 #Javascript
详解js创建对象的几种方法及继承
Apr 12 #Javascript
详解JQuery基础动画操作
Apr 12 #jQuery
You might like
PHP操作文件方法问答
2007/03/16 PHP
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
简单说说PHP优化那些事(经验分享)
2014/11/27 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
2009/09/19 Javascript
js中将字符串转换成json的三种方式
2011/01/12 Javascript
javascript:history.go()和History.back()的区别及应用
2012/11/25 Javascript
实现动画效果核心方式的js代码
2013/09/27 Javascript
在父页面调用子页面的JS方法
2013/09/29 Javascript
javascript下拉框选项单击事件的例子分享
2015/03/04 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
2018/08/27 Javascript
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
详解NodeJS Https HSM双向认证实现
2019/03/12 NodeJs
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
vue 组件间的通信之子组件向父组件传值的方式
2020/07/29 Javascript
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
python字典操作实例详解
2017/11/16 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
使用python读取txt文件的内容,并删除重复的行数方法
2018/04/18 Python
python得到电脑的开机时间方法
2018/10/15 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
Python字符串通过'+'和join函数拼接新字符串的性能测试比较
2019/03/05 Python
Python 里最强的地图绘制神器
2021/03/01 Python
一个SQL面试题
2014/08/21 面试题
创意广告词
2014/03/17 职场文书
全国文明单位申报材料
2014/05/31 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
员工试用期自我评价
2014/09/18 职场文书
初中信息技术教学反思
2016/02/16 职场文书
如何用Navicat操作MySQL
2021/05/12 MySQL