Jquery中文网 www.jquerycn.cn
Jquery中文网 >  前端编程  >  HTML5教程  >  正文 如何使用HTML5 canvas实现图像的马赛克

如何使用HTML5 canvas实现图像的马赛克

发布时间:2020-05-11   编辑:www.jquerycn.cn
jquery中文网为您提供如何使用HTML5 canvas实现图像的马赛克等资源,欢迎您收藏本站,我们将为您提供最新的如何使用HTML5 canvas实现图像的马赛克资源
HTML5 canvas可以处理很多的图像问题,那么如何使用HTML5 canvas实现图像的马赛克呢?本篇文章就来给大家介绍HTML5 canvas实现图像的马赛克的方法,下面我们一起来看具体内容。

HTML5 canvas

我们先给出代码,然后分析

HTML5 canvas实现图像的马赛克代码如下

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
  <script type="text/javascript">
    var imageData;    
function draw() {
      var canvas = document.getElementById('SimpleCanvas');      
      var mem_canvas = document.createElement('canvas');      
      if (!canvas || !canvas.getContext) {
              return false;
      }      
      var context = canvas.getContext('2d');      
      var img = new Image();
      img.onload = function onImageLoad() {
        mem_canvas.width = img.width;
        mem_canvas.height = img.height;        
      var mem_context = mem_canvas.getContext('2d');
        mem_context.drawImage(img, 0, 0);

        imageData = mem_context.getImageData(0, 0, mem_canvas.width, mem_canvas.height);
        CreateMosaic(mem_context, mem_canvas.width, mem_canvas.height, 8);

        context.drawImage(mem_canvas, 32, 32);
      }
      img.src = 'img/luffy.jpg'; 
    }    
      function CreateMosaic(context, width,height,mosaicSize) {
            var x=0;      
            var y=0;      
            for (y = 0; y < height; y = y   mosaicSize) {
                    for (x = 0; x < width; x = x   mosaicSize) {          
                    var cR = imageData.data[(y * width   x) * 4];          
                    var cG = imageData.data[(y * width   x) * 4   1];          
                    var cB = imageData.data[(y * width   x) * 4   2];

          context.fillStyle = "rgb(" cR "," cG "," cB ")";
          context.fillRect(x, y, x   mosaicSize, y   mosaicSize);
        }
      }
    }  
</script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
  <canvas id="SimpleCanvas" width="640" height="360" style="background-color:#FFFFFF;"></canvas>
  <div>Canvas Demo</div>
  <div id="output"></div>
</body>
</html>

说明:

body标签的on函数在显示页面时执行绘图功能。
draw函数在内存中创建HTML画布对象,读取原始图像并在画布上绘制它。调用渲染的画布对象的getImageData方法以获取像素信息。

   function draw() {
         var canvas = document.getElementById('SimpleCanvas');      
         var mem_canvas = document.createElement('canvas');
      if (!canvas || !canvas.getContext) {
                 return false;
      }
      var context = canvas.getContext('2d');
      var img = new Image();
      img.onload = function onImageLoad() {
        mem_canvas.width = img.width;
        mem_canvas.height = img.height;
        var mem_context = mem_canvas.getContext('2d');
        mem_context.drawImage(img, 0, 0);
        imageData = mem_context.getImageData(0, 0, mem_canvas.width, mem_canvas.height);
        CreateMosaic(mem_context, mem_canvas.width, mem_canvas.height, 8);
        context.drawImage(mem_canvas, 32, 32);
      }
      img.src = 'img/luffy.jpg'; 
    }

使用所读取的原始图像的宽度和高度,HTML画布的上下文,马赛克的大小以及原始图像的像素信息来执行马赛克处理。马赛克处理由CreateMosaic()函数实现。由于图像的像素信息大小很大,因此不存储在CreateMosaic()函数的参数中,而是存储在全局变量中。如果你想提高代码的可读性,可以赋予CreateMosaic()函数参数的结构。
在CreateMosaic中利用循环根据马赛克的大小来取出像素的值,如果马赛克的大小为4,可以取得每4个像素的像素值,使用获取的像素值的颜色在画布上绘制正方形的马赛克大小

 function CreateMosaic(context, width,height,mosaicSize) {
       var x=0;      
       var y=0;
      for (y = 0; y < height; y = y   mosaicSize) {
               for (x = 0; x < width; x = x   mosaicSize) {          
          var cR = imageData.data[(y * width   x) * 4];          
               var cG = imageData.data[(y * width   x) * 4   1];          
               var cB = imageData.data[(y * width   x) * 4   2];
          context.fillStyle = "rgb(" cR "," cG "," cB ")";
          context.fillRect(x, y, x   mosaicSize, y   mosaicSize);
        }
      }
    }

运行结果:

2345截图20181201164352.png

马赛克程度深浅的变化

CreateMosaic(mem_context, mem_canvas.width, mem_canvas.height, 8);

只要更改CreateMosaic的第四个参数的值就可以改变马赛克程度的深浅。

当第四个参数值为4时图像的马赛克效果

HTML5 canvas

当第四个参数值为2时图像的马赛克效果

HTML5 canvas

以上就是如何使用HTML5 canvas实现图像的马赛克的详细内容,更多请关注jquery中文网其它相关文章!

-->
  • 本文原创发布jQuery中文网,转载请注明出处,感谢您的尊重!
  • 您可能感兴趣的文章:
    如何使用HTML5 canvas实现图像的马赛克
    HTML5 canvas如何实现马赛克的淡入淡出效果(代码)
    关于canvas下载二维码和图片加水印的方法
    如何使用canvas实现图片马赛克
    如何解决canvas绘图时遇到的跨域问题
    Photoshop在图片上打马赛克方法分享
    canvas与svg的区别有什么?canvas和svg的区别比较
    使用JavaScript和canvas实现图片的裁剪
    html5 canvas标签的作用以及canvas标签的历史由来介绍
    html5 canvas标签是什么意思?canvas标签使用方法介绍

    [关闭]