How to divide image in tiles?

Question

I have to achieve the following task:

divides the image into tiles, computes the average color of each tile, fetches a tile from the server for that color, and composites the results into a photomosaic of the original image.

What would be the best strategy? the first solution coming to my mind is using canvas.

Answer 1

A simple way to get pixel data and finding the means of tiles. The code will need more checks for images that do not have dimensions that can be divided by the number of tiles.

var image = new Image();
image.src = ??? // the URL if the image is not from your domain you will have to move it to your server first

// wait for image to load
image.onload = function(){
    // create a canvas
    var canvas = document.createElement("canvas");
    //set its size to match the image
    canvas.width = this.width;
    canvas.height = this.height;
    var ctx = canvas.getContext("2d"); // get the 2d interface
    // draw the image on the canvas
    ctx.drawImage(this,0,0);
    // get the tile size
    var tileSizeX = Math.floor(this.width / 10);
    var tileSizeY = Math.floor(this.height / 10);
    var x,y;
    // array to hold tile colours
    var tileColours = [];
    // for each tile
    for(y = 0; y < this.height; y += tileSizeY){
        for(x = 0; x < this.width; x += tileSizeX){
            // get the pixel data
            var imgData = ctx.getImageData(x,y,tileSizeX,tileSizeY);
            var r,g,b,ind;
            var i = tileSizeY * tileSizeX; // get pixel count
            ind = r = g = b = 0;
            // for each pixel (rgba 8 bits each)
            while(i > 0){
                // sum the channels
                r += imgData.data[ind++];
                g += imgData.data[ind++];
                b += imgData.data[ind++];
                ind ++;
                i --;
            }
            i = ind /4; // get the count again
            // calculate channel means
            r /= i;
            g /= i;
            b /= i;
            //store the tile coords and colour
            tileColours[tileColours.length] = {
                rgb : [r,g,b],
                x : x,
                y : y,
            }
        }
        // all done now fetch the images for the found tiles.
    }

Answer 2

I created a solution for this (I am not getting the tile images from back end)

  // first function call to create photomosaic 
  function photomosaic(image) {

      // Dimensions of each tile
      var tileWidth = TILE_WIDTH;
      var tileHeight = TILE_HEIGHT;

      //creating the canvas for photomosaic
      var canvas = document.createElement('canvas');
      var context = canvas.getContext("2d");
      canvas.height = image.height;
      canvas.width = image.width;

      var imageData = context.getImageData(0, 0, image.width, image.height);
      var pixels = imageData.data;

      // Number of mosaic tiles
      var numTileRows = image.width / tileWidth;
      var numTileCols = image.height / tileHeight;


      //canvas copy of image
      var imageCanvas = document.createElement('canvas');
      var imageCanvasContext = canvas.getContext('2d');
      imageCanvas.height = image.height;
      imageCanvas.width = image.width;
      imageCanvasContext.drawImage(image, 0, 0);


      //function for finding the average color
      function averageColor(row, column) {
          var blockSize = 1, // we can set how many pixels to skip

              data, width, height,
              i = -4,
              length,
              rgb = {
                  r: 0,
                  g: 0,
                  b: 0
              },
              count = 0;          

          try {
              data = imageCanvasContext.getImageData(column * TILE_WIDTH, row * TILE_HEIGHT, TILE_HEIGHT, TILE_WIDTH);
          } catch (e) {
              alert('Not happening this time!');
              return rgb;
          }

          length = data.data.length;

          while ((i += blockSize * 4) < length) {
              ++count;
              rgb.r += data.data[i];
              rgb.g += data.data[i + 1];
              rgb.b += data.data[i + 2];
          }

          // ~~ used to floor values
          rgb.r = ~~(rgb.r / count);
          rgb.g = ~~(rgb.g / count);
          rgb.b = ~~(rgb.b / count);

          return rgb;

      }

      // 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 rgb = averageColor(r, c)
              var red = rgb.r;
              var green = rgb.g;
              var blue = rgb.b;

              // 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 trueRow = (r * tileHeight) + tr;
                      var trueCol = (c * tileWidth) + tc;

                      // Calculate the position of the current pixel in the array
                      var pos = (trueRow * (imageData.width * 4)) + (trueCol * 4);

                      // Assign the colour to each pixel
                      pixels[pos + 0] = red;
                      pixels[pos + 1] = green;
                      pixels[pos + 2] = blue;
                      pixels[pos + 3] = 255;
                  };
              };
          };
      };

      // Draw image data to the canvas
      context.putImageData(imageData, 0, 0);
      return canvas;
  }

  function create() {
      var image = document.getElementById('image');
      var canvas = photomosaic(image);
      document.getElementById("output").appendChild(canvas);
  };

DEMO:https://jsfiddle.net/gurinderiitr/sx735L5n/

Answer 3

Try using the JIMP javascript library to read the pixel color and use invert, normalize or similar property for modifying the image.

Have a look on the jimp library https://github.com/oliver-moran/jimp