bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

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

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

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

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

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

HTML5 canvas實(shí)現(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>

說(shuō)明：

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

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);
        }
      }
    }

運(yùn)行結(jié)果：

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

馬賽克程度深淺的變化

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

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

當(dāng)?shù)谒膫€(gè)參數(shù)值為4時(shí)圖像的馬賽克效果

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

當(dāng)?shù)谒膫€(gè)參數(shù)值為2時(shí)圖像的馬賽克效果

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

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

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

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

廣告

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

小程序開(kāi)發(fā)