html5 像素化

 1 function draw(id){
 2         var canvas = document.getElementById(id);
 3         if(canvas.getContext == null){
 4             return false;
 5         }
 6         var context = canvas.getContext("2d");
 7         var img = new Image();
 8         img.src = "heng.jpg";
 9         img.onload = function(){
10             context.drawImage(img,0,0,500,500);
11             var imageData = context.getImageData(0,0,canvas.width,canvas.height);
12             var pixels = imageData.data;
13             
14             context.clearRect(0,0,canvas.width,canvas.height);
15 
16             var numTileRows = 100;
17             var numTileCols = 100;
18 
19             var tileWidth = imageData.width/numTileCols;
20             var tileHeight = imageData.height/numTileRows;
21 
22             for(var r = 0; r < numTileRows; r++){
23                 for(var c = 0; c < numTileCols; c++){ 
24                     // 取每个小块的中心点坐标
25                     var x = (c * tileWidth) + tileWidth/2;
26                     var y = (r * tileHeight) + tileHeight/2;
27 
28                     var pos     = Math.floor(y) * imageData.width * 4 + Math.floor(x) * 4;
29                     var red     = pixels[pos];
30                     var green     = pixels[pos+1];
31                     var blue     = pixels[pos+2];
32                     context.fillStyle = "rgb(" + red + " ," + green + "," + blue +")";
33                     context.fillRect(x - (tileWidth/2),y - (tileHeight/2), tileWidth,tileHeight );
34                 }
35             }
36 
37         };
38     }
39     draw("myCanvas");