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 相关文章推荐
关于js获取radio和select的属性并控制的代码
May 12 Javascript
window.addEventListener来解决让一个js事件执行多个函数
Dec 26 Javascript
javascript正则表达式之search()用法实例
Jan 19 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
Jun 05 Javascript
jquery延迟对象解析
Oct 26 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
Apr 18 Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
Jquery $.map使用方法实例详解
Sep 01 jQuery
vue或react项目生产环境去掉console.log的操作
Sep 02 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 Javascript
原生Js 实现的简单无缝滚动轮播图的示例代码
May 10 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的基本常识小结
2013/07/05 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
一个高效的JavaScript压缩工具下载集合
2007/03/06 Javascript
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
jQuery给多个不同元素添加class样式的方法
2015/03/26 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
AngularJS中的表单简单入门
2016/07/28 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
JavaScript实现自动切换图片代码
2016/10/11 Javascript
jQuery居中元素scrollleft计算方法示例
2017/01/16 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
详解vue-cli3使用
2018/08/14 Javascript
[51:15]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-GAMING
2014/05/22 DOTA
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
详解python调用cmd命令三种方法
2019/07/08 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
Django实现图片上传功能步骤解析
2020/04/22 Python
python 解决函数返回return的问题
2020/12/05 Python
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
2018/12/18 HTML / CSS
Urban Outfitters美国官网:美国生活方式品牌
2016/08/26 全球购物
墨西哥皇宫度假村预订:Palace Resorts
2018/06/16 全球购物
日本化妆品植村秀俄罗斯官方网站:Shu Uemura俄罗斯
2020/02/01 全球购物
基本公共卫生服务健康教育工作方案
2014/05/22 职场文书
个人求职信范文
2014/05/24 职场文书
党员批评与自我批评
2014/10/15 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
《窃读记》教学反思
2016/02/18 职场文书