Image to 'Surface Map'

by Bintang Anandhiya

HTML

<input type="file" id="fileUpload">
<img id="imageDisplay">
<button id="button">BARF!</button>
<canvas width="100" height="100" id="canvas">

CSS

canvas{
  background-color: #FFFFFF;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}
img{
  display: block;
}
button{
  display: block;
}

JavaScript

var fileUpload = document.getElementById("fileUpload");
var imageDisplay = document.getElementById("imageDisplay");
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

fileUpload.onchange = function(event){
	var selectedFile = event.target.files[0];
  
  if(selectedFile.type.match("image.*")){
    var reader = new FileReader();
    
    reader.onload = function(evnt){
			imageDisplay.src = evnt.target.result;
      
      
      canvas.width = imageDisplay.width;
      canvas.height = imageDisplay.height;
      context.drawImage(imageDisplay,0,0);
      
      var imgd = context.getImageData(0,0,canvas.width,canvas.height);
      console.log(imgd);
      imageDataToSurface(imgd);
    }
    
    reader.readAsDataURL(selectedFile);
    
  }
  
}

function rgbToHex(r, g, b) {
	return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

function getPix(imageData,x,y){
	var imageWidth = imageData.width, 
  		imageHeight = imageData.height, 
      pix = imageData.data;
  
  if(x >= 0 && x < imageWidth && y >= 0 && y < imageHeight){
  	var pos = ((y * imageWidth) + x) * 4;
   	var result = {
    	r: pix[pos + 0],
      g: pix[pos + 1],
      b: pix[pos + 2],
      a: pix[pos + 3]
    }
    return result;
  }else{
  	console.log("coord does not exist!");
  }
  
}

function imageDataToSurface(imageData){
	var imageWidth = imageData.width, 
  		imageHeight = imageData.height;
  
  var dummyMap = [];
	for(var x = 0; x < imageWidth; x++){
  	dummyMap[x] = [];
  	for(var y = 0; y < imageHeight; y++){
    	var currentPix = getPix(imageData,x,y);
    	dummyMap[x][y] = rgbToHex(currentPix.r,currentPix.g,currentPix.b);
    }
  }
  console.log(dummyMap);
}