JSFiddle - React, Tailwind, and code Playground

by gurinderiitr

HTML

<div class="container">		
		<img id="image"/>
		<div class="inputDiv">
			<input id="input" type="file" accept="image/*">
			<button onclick="create()">create</button>
		</div>
		<div id='output'></div>
		
	</div>

CSS

#output, .container{
		text-align: center;
	}
	.inputDiv{
		margin: 20px 0px;
	}

JavaScript

var TILE_WIDTH=10;
var TILE_HEIGHT=10;

document.getElementById("input").onchange = function () {
			var reader = new FileReader();
			reader.onload = function (e) {
	        // get loaded data and render thumbnail.
	        document.getElementById("image").src = e.target.result;
	    };
		    // read the image file as a data URL.
		    reader.readAsDataURL(this.files[0]);
		};
    
      // 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;

         ...