HTML5canvas如何實現(xiàn)圖像的馬賽克-創(chuàng)新互聯(lián)

這篇文章運用簡單易懂的例子給大家介紹HTML5 canvas如何實現(xiàn)圖像的馬賽克，代碼非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

成都創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站制作、做網(wǎng)站與策劃設(shè)計,尼木網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:尼木等地區(qū)。尼木做網(wǎng)站價格咨詢:13518219792

HTML5 canvas如何實現(xiàn)圖像的馬賽克

我們先給出代碼，然后分析

HTML5 canvas實現(xiàn)圖像的馬賽克代碼如下

<!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函數(shù)在顯示頁面時執(zhí)行繪圖功能。
draw函數(shù)在內(nèi)存中創(chuàng)建HTML畫布對象，讀取原始圖像并在畫布上繪制它。調(diào)用渲染的畫布對象的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畫布的上下文，馬賽克的大小以及原始圖像的像素信息來執(zhí)行馬賽克處理。馬賽克處理由CreateMosaic（）函數(shù)實現(xiàn)。由于圖像的像素信息大小很大，因此不存儲在CreateMosaic（）函數(shù)的參數(shù)中，而是存儲在全局變量中。如果你想提高代碼的可讀性，可以賦予CreateMosaic（）函數(shù)參數(shù)的結(jié)構(gòu)。
在CreateMosaic中利用循環(huán)根據(jù)馬賽克的大小來取出像素的值，如果馬賽克的大小為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);
        }
      }
    }

運行結(jié)果：

HTML5 canvas如何實現(xiàn)圖像的馬賽克

馬賽克程度深淺的變化

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

只要更改CreateMosaic的第四個參數(shù)的值就可以改變馬賽克程度的深淺。

當?shù)谒膫€參數(shù)值為4時圖像的馬賽克效果

HTML5 canvas如何實現(xiàn)圖像的馬賽克

當?shù)谒膫€參數(shù)值為2時圖像的馬賽克效果

HTML5 canvas如何實現(xiàn)圖像的馬賽克

關(guān)于HTML5 canvas如何實現(xiàn)圖像的馬賽克就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

新聞名稱：HTML5canvas如何實現(xiàn)圖像的馬賽克-創(chuàng)新互聯(lián)
路徑分享：http://jinyejixie.com/article16/jgddg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、服務(wù)器托管、品牌網(wǎng)站制作、自適應(yīng)網(wǎng)站、Google、靜態(tài)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

HTML5canvas如何實現(xiàn)圖像的馬賽克-創(chuàng)新互聯(lián)