HTML Canvas Image Pixelate
<!DOCTYPE html> <html> <head> <title>Manipulating images and video</title> <meta charset="utf-8"> /*w w w. ja v a2 s. c om*/ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var canvas = $("#myCanvas"); var context = canvas.get(0).getContext("2d"); // Pixelating var image = new Image(); image.src = "image1.png"; $(image).load(function() { context.drawImage(image, 0, 0, 1024, 683, 0, 0, 500, 500); var imageData = context.getImageData(0, 0, canvas.width(), canvas.height()); var pixels = imageData.data; // Clear the image context.clearRect(0, 0, canvas.width(), canvas.height()); // Number of tiles var numTileRows = 20; var numTileCols = 20; // Dimensions of each tile var tileWidth = imageData.width/numTileCols; var tileHeight = imageData.height/numTileRows; // Loop through each tile for (var r = 0; r < numTileRows; r++) { for (var c = 0; c < numTileCols; c++) { var x = (c*tileWidth)+(tileWidth/2); var y = (r*tileHeight)+(tileHeight/2); // Use Math.floor to convert the pixel positions to integers var pos = (Math.floor(y)*(imageData.width*4))+(Math.floor(x)*4); var red = pixels[pos]; var green = pixels[pos+1]; var blue = pixels[pos+2]; context.fillStyle = "rgb("+red+", "+green+", "+blue+")"; // Draw the pixelated rectangle context.fillRect(x-(tileWidth/2), y-(tileHeight/2), tileWidth, tileHeight); // Or, how about circles? //context.beginPath(); //context.arc(x, y, tileWidth/2, 0, Math.PI*2); //context.closePath(); //context.fill(); }; }; }); }); </script> </head> <body> <canvas id="myCanvas" width="500" height="500"> <!-- Insert fallback content here --> </canvas> </body> </html>