站長資訊網(wǎng)HTML5 canvas可以處理很多的圖像問題，那么如何使用HTML5 canvas實現(xiàn)圖像的馬賽克呢？本篇文章就來給大家介紹HTML5 canvas實現(xiàn)圖像的馬賽克的方法，下面我們一起來看具體內(nèi)容。
我們先給出代碼，然后分析
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標(biāo)簽的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é)果：
馬賽克程度深淺的變化
CreateMosaic(mem_context, mem_canvas.width, mem_canvas.height, 8);
只要更改CreateMosaic的第四個參數(shù)的值就可以改變馬賽克程度的深淺。
當(dāng)?shù)谒膫€參數(shù)值為4時圖像的馬賽克效果
當(dāng)?shù)谒膫€參數(shù)值為2時圖像的馬賽克效果
