HTML Canvas Image Create mosaic

Description

HTML Canvas Image Create mosaic

View in separate window 

<!DOCTYPE html>

<html>
  <head>
    <title>Manipulating images and video</title>
    <meta charset="utf-8">
    /*  w  ww.  j a  v a 2  s.  co  m*/
    <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");

        // Creating a mosaic
        var imageData = context.createImageData(500, 500);
        var pixels = imageData.data;
        
        // Number of mosaic segments
        var numTileRows = 4;
        var numTileCols = 4;
        
        // Dimensions of each segment
        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++) {
            // Set the pixel values for each tile
            var red = Math.floor(Math.random()*255);
            var green = Math.floor(Math.random()*255);
            var blue = Math.floor(Math.random()*255);
        
            // Loop through each tile pixel
            for (var tr = 0; tr < tileHeight; tr++) {
              for (var tc = 0; tc < tileWidth; tc++) {
                // Calculate the true position of the tile pixel
                var trueX = (c*tileWidth)+tc;
                var trueY = (r*tileHeight)+tr;
            
                // Calculate the position of the current pixel in the array
                var pos = (trueY*(imageData.width*4))+(trueX*4);
                
                // Assign the colour to each pixel
                pixels[pos] = red;
                pixels[pos+1] = green;
                pixels[pos+2] = blue;
                pixels[pos+3] = 255;
              };
            };
          };
        };
        
        // Draw image data to the canvas
        context.putImageData(imageData, 0, 0);
        

      });
    </script>
  </head>
  
  <body>
    <canvas id="myCanvas" width="500" height="500">
      <!-- Insert fallback content here -->
    </canvas>
  </body>
</html>



PreviousNext

Related