compare two images

assets/js/rgbaster.js

@@ -0,0 +1,132 @@
+;(function(window, undefined){
+
+  "use strict";
+
+  // Helper functions.
+  var getContext = function(){
+    return document.createElement("canvas").getContext('2d');
+  };
+
+  var getImageData = function(img, loaded){
+
+    var imgObj = new Image();
+    var imgSrc = img.src || img;
+
+    // Can't set cross origin to be anonymous for data url's
+    // https://github.com/mrdoob/three.js/issues/1305
+    if ( imgSrc.substring(0,5) !== 'data:' )
+      imgObj.crossOrigin = "Anonymous";
+
+    imgObj.onload = function(){
+      var context = getContext();
+      context.drawImage(imgObj, 0, 0);
+
+      var imageData = context.getImageData(0, 0, imgObj.width, imgObj.height);
+      loaded && loaded(imageData.data);
+    };
+
+    imgObj.src = imgSrc;
+
+  };
+
+  var makeRGB = function(name){
+    // console.log('rbgname', name);
+    return ['rgb(', name, ')'].join('');
+  };
+
+  // edited rois 
+  var makeRGBasObj = function (name) {
+    var splitVal = name.split(',')
+    return {r: splitVal[0], g: splitVal[1], b: splitVal[2]};
+  }
+  // edited rois 
+
+  var mapPalette = function(palette){
+    return palette.map(function(c){ return makeRGB(c.name); });
+  };
+
+
+  // RGBaster Object
+  // ---------------
+  //
+  var BLOCKSIZE = 5;
+  var PALETTESIZE = 10;
+
+  var RGBaster = {};
+
+  RGBaster.colors = function(img, opts){
+
+    opts = opts || {};
+    var exclude = opts.exclude || [ ], // for example, to exclude white and black:  [ '0,0,0', '255,255,255' ]
+        paletteSize = opts.paletteSize || PALETTESIZE;
+
+    getImageData(img, function(data){
+
+              var length        = ( img.width * img.height ) || data.length,
+                  colorCounts   = {},
+                  rgbString     = '',
+                  rgb           = [],
+                  colors        = {
+                    dominant: { name: '', count: 0 },
+                    palette:  Array.apply(null, new Array(paletteSize)).map(Boolean).map(function(a){ return { name: '0,0,0', count: 0 }; })
+                  };
+
+              // Loop over all pixels, in BLOCKSIZE iterations.
+              var i = 0;
+              while ( i < length ) {
+                rgb[0] = data[i];
+                rgb[1] = data[i+1];
+                rgb[2] = data[i+2];
+                rgbString = rgb.join(",");
+
+                // skip undefined data
+                if (rgb.indexOf(undefined) !== -1) {
+                  // Increment!
+                  i += BLOCKSIZE * 4;
+                  continue;
+                }
+
+                // Keep track of counts.
+                if ( rgbString in colorCounts ) {
+                  colorCounts[rgbString] = colorCounts[rgbString] + 1;
+                }
+                else{
+                  colorCounts[rgbString] = 1;
+                }
+
+                // Find dominant and palette, ignoring those colors in the exclude list.
+                if ( exclude.indexOf( makeRGB(rgbString) ) === -1 ) {
+                  var colorCount = colorCounts[rgbString];
+                  if ( colorCount > colors.dominant.count ){
+                    colors.dominant.name = rgbString;
+                    colors.dominant.count = colorCount;
+                  } else {
+                    colors.palette.some(function(c){
+                      if ( colorCount > c.count ) {
+                        c.name = rgbString;
+                        c.count = colorCount;
+                        return true;
+                      }
+                    });
+                  }
+                }
+
+                // Increment!
+                i += BLOCKSIZE * 4;
+              }
+
+              if ( opts.success ) {
+                var palette = mapPalette(colors.palette);
+                opts.success({
+                  dominant: makeRGB(colors.dominant.name),
+                  secondary: palette[0],
+                  palette:  palette,
+                  makeRGBobj: makeRGBasObj(colors.dominant.name)
+                });
+              }
+    });
+  };
+
+  window.RGBaster = window.RGBaster || RGBaster;
+
+})(window);

index.html

@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>Compare image RGB</title>
+	<link rel="stylesheet" href="assets/css/bootstrap.min.css">
+</head>
+<body>
+	<div class="container">
+		<div class="row">
+			<center><h2>COMPARE IMAGE RGB</h2></center>
+
+			<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
+				<center>
+					<h4>Image 1</h4>
+					<img id="img1" style="max-width: 50%; max-height: 50%" src="assets/img/default.png" atitle="Data image 1">
+				<input type="file" name="file1" id="file1" >
+				</center>
+			</div>
+			<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
+				<center>
+					<h4>Image 2</h4>
+					<img id="img2" style="max-width: 50%; max-height: 50%" src="assets/img/default.png" atitle="Data image 2">
+				<input type="file" name="file2" id="file2" >
+				</center>
+			</div>
+			<div class="separator"></div>
+			<center><button id="compare" class="btn btn-primary btn-xs">Compare</button></center>
+
+			<div id="result_comparation"></div>
+		</div>
+	</div>
+
+</body>
+<script src="assets/js/jquery.min.js"></script>
+<script src="assets/js/bootstrap.min.js"></script>
+<script src="assets/js/rgbaster.js"></script>
+<script>
+	$(document).ready(function() {
+		// function for handle file img
+		function handleFileSelect1 (evt) {
+			var files = evt.target.files;
+			for (var i = 0, f; f = files[i]; i++) {
+		        // only image file
+		        if (!f.type.match('image.*')) {continue;}
+		        // instance file redaer API
+		        var reader = new FileReader();
+		        // read file
+		        reader.onload = (function(theFile){
+		        	return function (e) {
+		            // append image to ID img1
+		            $('#img1').attr('src',  e.target.result).attr('title', theFile.name);
+		          };
+		      	})(f);
+		        // perintahkan utk 
+		        reader.readAsDataURL(f);
+		    }
+		}
+	    // fungsi utk handle file img
+	    function handleFileSelect2 (evt) {
+	    	var files = evt.target.files;
+	    	for (var i = 0, f; f = files[i]; i++) {
+	        // hanya file gambar saja
+		        if (!f.type.match('image.*')) {continue;}
+		        // instance file redaer API
+		        var reader = new FileReader();
+		        // baca file dr komputer yg sdh dipilih
+		        reader.onload = (function(theFile){
+		          // tempel file gambar yg dipilih ke ID img2
+		          return function (e) {
+		          	$('#img2').attr('src',  e.target.result).attr('title', theFile.name);
+		          };
+		    	})(f);
+
+				reader.readAsDataURL(f);
+			}
+		}
+	    //add event when file is added.
+	    document.getElementById('file1').addEventListener('change', handleFileSelect1, false);
+	    document.getElementById('file2').addEventListener('change', handleFileSelect2, false);
+
+	    //compare 2 image
+	    $('#compare').click(function(event) {
+	    	// add variable
+	    	var r1, g1, b1;
+	    	var r2, g2, b2;
+	    	// read ID of img element
+	    	var img1 = document.getElementById('img1');
+	    	var img2 = document.getElementById('img2');
+	        // image 1
+	        RGBaster.colors(img1, {
+	        	success: function (payload1) {
+	        		console.log('image1 rgb', payload1.makeRGBobj);
+	        		r1 = payload1.makeRGBobj.r;
+	        		g1 = payload1.makeRGBobj.g;
+	        		b1 = payload1.makeRGBobj.b;
+
+		            // image 2
+		            RGBaster.colors(img2, {
+		            	success: function (payload2) {
+		            		console.log('image2 rgb', payload2.makeRGBobj);
+		            		r2 = payload2.makeRGBobj.r;
+		            		g2 = payload2.makeRGBobj.g;
+		            		b2 = payload2.makeRGBobj.b;
+							// count rgb differences between two image 
+							var result_r = r1 - r2;
+							var result_g = g1 - g2;
+							var result_b = b1 - b2;
+							// append to id #result_comparation
+							var resultCount = "<P> RGB IMG 1 : "+payload1.dominant+"</P>"
+							+"<p>RGB IMG 2 : "+payload2.dominant+"</p>"
+							+"If image1 - image2, So differences is : <br>"
+							+"R : "+result_r+"<br>"
+							+"G : "+result_g+"<br>"
+							+"B : "+result_b+"<br>";
+							$('#result_comparation').html(resultCount);
+		            	}
+		        	});
+		        }
+		    });
+	    });
+});
+</script>
+</html>