grafijs · cthedot · Apr 27, 2016
diff --git a/example.html b/example.html
@@ -1,38 +1,53 @@
 <html>
-  <input type="file" id="input" onchange="reader.readAsDataURL(this.files[0])">
-  <h1>original</h1>
-  <img id="original">
-  <h1>processed</h1>
-  <canvas id="canvas" hidden></canvas>
-  <canvas id="output"></canvas>
-  <script src="grafi.js"></script>
-  <script>
-    var original = document.getElementById('original')
-    var canvas = document.getElementById('canvas')
-    var output = document.getElementById('output')
-    var cCtx = canvas.getContext('2d')
-    var oCtx = output.getContext('2d')
-    var reader = new FileReader()
-    function setUpCanvas() {
-      output.width = original.width
-      output.height = original.height
-      canvas.width = original.width
-      canvas.height = original.height
-      cCtx.drawImage(original, 0, 0)
-    }
-    function border(){
-      var imagedata = cCtx.getImageData(0, 0, original.width, original.height)
-      var newImage =  grafi.contrast(grafi.invert(grafi.contrast(grafi.grayscale(imagedata, {mode:'simple', channel:'0'}), {level:2})), {level:5})
-      // console.log(gsImage.data.toString())
-      oCtx.putImageData(newImage, 0, 0)
-    }
-    reader.onload = function() {
-      original.src = reader.result
-    }
-    original.onload = function () {
-      setUpCanvas()
-      border()
-    }
-  </script>
+<input type="file" id="input" onchange="reader.readAsDataURL(this.files[0])">
+<h1>original</h1>
+<img id="original">
+<h1>processed</h1>
+<canvas id="canvas" hidden></canvas>
+<canvas id="output"></canvas>
+<script src="grafi.js"></script>
+<script>
+  var original = document.getElementById('original')
+  var canvas = document.getElementById('canvas')
+  var output = document.getElementById('output')
+  var cCtx = canvas.getContext('2d')
+  var oCtx = output.getContext('2d')
+  var reader = new FileReader()
+
+  function setUpCanvas() {
+    output.width = original.width
+    output.height = original.height
+    canvas.width = original.width
+    canvas.height = original.height
+    cCtx.drawImage(original, 0, 0)
+  }
+
+  function border() {
+    var imagedata = cCtx.getImageData(0, 0, original.width, original.height)
+    var newImage =
+      grafi.contrast(
+        grafi.invert(
+          grafi.contrast(imagedata, {
+            level: 2
+          })
+        ), {
+          level: 2
+        })
+
+    /*var newImage =
+          grafi.grayscale(imagedata, {
+            mode: 'simple', channel: 0
+          })*/
+
+    oCtx.putImageData(newImage, 0, 0)
+  }
+  reader.onload = function() {
+    original.src = reader.result
+  }
+  original.onload = function() {
+    setUpCanvas()
+    border()
+  }
+</script>
 
 </hmtl>
diff --git a/grafi.js b/grafi.js
@@ -31,34 +31,6 @@
     }
   }
 
-  /**
-    ## formatter
-    Internal function used to format pixel data into ImageData object
-
-    ### Parameters
-      - pixelData `Uint8ClampedArray`: pixel representation of the image
-      - width `Number`: width of the image
-      - hight `Number`: height of the image
-
-    ### Example
-        formatter(new Uint8ClampedArray[400], 10, 10)
-        // ImageData { data: Uint8ClampedArray[400], width: 10, height: 10, }
-   */
-  function formatter (pixelData, width, height) {
-    // check the size of data matches
-    checkColorDepth(pixelData, width, height)
-
-    if (!(pixelData instanceof Uint8ClampedArray)) {
-      throw new Error('pixel data passed is not an Uint8ClampedArray')
-    }
-
-    // If window is available create ImageData using browser API,
-    // otherwise call ImageData constructor
-    if (typeof window === 'object') {
-      return new window.ImageData(pixelData, width, height)
-    }
-    return new GrafiImageData(pixelData, width, height)
-  }
   /**
     ## convolution method
     Internal method to apply convolution filter
@@ -157,7 +129,8 @@
         }
       }
     }
-    return formatter(newPixelData, imgData.width, imgData.height)
+    imgData.data.set(newPixelData)
+    return imgData
   }
 
   /**
@@ -229,7 +202,8 @@
       newPixelData[index + 3] = imgData.data[index + 3]
     }
 
-    return formatter(newPixelData, imgData.width, imgData.height)
+    imgData.data.set(newPixelData)
+    return imgData
   }
 
   /**
@@ -286,7 +260,8 @@
       newPixelData[_i + 3] = imgData.data[_i + 3]
     }
 
-    return formatter(newPixelData, imgData.width, imgData.height)
+    imgData.data.set(newPixelData)
+    return imgData
   }
   /**
     ## despeckle method
@@ -341,7 +316,8 @@
 
     // every return from grafi methods are ImageData,
     // internal function `formatter()` will take care of this
-    return formatter(_pixelData_, _width_, _height_)
+    imgData.data.set(newPixelData)
+    return imgData
   }
   /**
     ## edge method
@@ -442,7 +418,8 @@
       newPixelData[_index + 2] = _grayscaled
       newPixelData[_index + 3] = imgData.data[_index + 3]
     }
-    return formatter(newPixelData, imgData.width, imgData.height)
+    imgData.data.set(newPixelData)
+    return imgData
   }
   /**
     ## invert method
@@ -458,17 +435,18 @@
   function invert (imgData) {
     checkColorDepth(imgData)
     var dataLength = imgData.data.length
-    var newPixeldata = new Uint8ClampedArray(dataLength)
+    var newPixelData = new Uint8ClampedArray(dataLength)
     var i
     for (i = 0; i < dataLength; i++) {
       // the image has Alpha channel, skip invert every 4th one
       if ((i + 1) % 4 === 0) {
-        newPixeldata[i] = imgData.data[i]
+        newPixelData[i] = imgData.data[i]
         continue
       }
-      newPixeldata[i] = 255 - imgData.data[i]
+      newPixelData[i] = 255 - imgData.data[i]
     }
-    return formatter(newPixeldata, imgData.width, imgData.height)
+    imgData.data.set(newPixelData)
+    return imgData
   }
   /**
     ## posterize method
@@ -519,7 +497,8 @@
       newPixelData[index + 3] = imgData.data[index + 3]
     }
 
-    return formatter(newPixelData, imgData.width, imgData.height)
+    imgData.data.set(newPixelData)
+    return imgData
   }
   /**
     ## sharpen method
@@ -618,7 +597,8 @@
       newPixelData[_i + 3] = imgData.data[_i + 3]
     }
 
-    return formatter(newPixelData, imgData.width, imgData.height)
+    imgData.data.set(newPixelData)
+    return imgData
   }
   /**
     ## threshold method
@@ -665,7 +645,8 @@
       newPixelData[index + 2] = lookupTable[grayscaledData[index + 2]]
       newPixelData[index + 3] = imgData.data[index + 3]
     }
-    return formatter(newPixelData, imgData.width, imgData.height)
+    imgData.data.set(newPixelData)
+    return imgData
   }
   /**
     ## pseudocolor method
@@ -744,7 +725,8 @@
       newPixelData[index + 3] = imgData.data[index + 3]
     }
 
-    return formatter(newPixelData, imgData.width, imgData.height)
+    imgData.data.set(newPixelData)
+    return imgData
   }
 
   var grafi = {}

diff --git a/server.js b/server.js
@@ -0,0 +1,104 @@
+/* global process */
+/**
+ * A JavaScript version SimpleHTTPServer.
+ */
+var http = require('http'),
+	port = 8009,
+	urlParser = require('url'),
+	fs = require('fs'),
+	path = require('path'),
+	current_dir = path.join(process.cwd(), ''),
+	CONTENT_TYPES = {
+		'.jpg': 'image/jpeg',
+		'.gif': 'image/gif',
+		'.png': 'image/png',
+		'.css': 'text/css',
+		'.js': 'text/javascript',
+		'.json': 'application/json',
+		'.eot': 'application/vnd.ms-fontobject',
+		'.otf': 'font/otf', // "application/x-font-opentype"
+		'.svg': 'image/svg+xml',
+		'.ttf': 'font/ttf', // "application/x-font-ttf" or "application/x-font-truetype"
+		'.woff': 'application/x-woff', // "application/x-font-woff"
+		'.manifest': 'text/cache-manifest'
+	}
+
+var cachedStat = {
+	table: {},
+	fileStatSync: function (fpath) {
+		if (!cachedStat.table[fpath]) {
+			cachedStat.table[fpath] = fs.statSync(fpath);
+		}
+		return cachedStat.table[fpath];
+	},
+	fileStat: function (fpath, callback) {
+		if (cachedStat.table[fpath]) {
+			callback(null, cachedStat.table[fpath]);
+		} else {
+			var cb = function (err, _stat) {
+				if (!err) {
+					cachedStat.table[fpath] = _stat;
+				}
+				callback(err, _stat);
+			};
+			fs.stat(fpath, cb);
+		}
+	}
+};
+
+http.createServer(function (request, response) {
+	var urlObject = urlParser.parse(request.url, true),
+		pathname = decodeURIComponent(urlObject.pathname),
+		contentType = 'text/html'
+
+	console.log("[" + (new Date()).toUTCString() + "] " + '"' + request.method + " " + pathname + "\"");
+
+	if (pathname == '/') pathname = '/index.html'
+
+	var filePath = path.join(current_dir, pathname);
+	cachedStat.fileStat(filePath, function (err, stats) {
+		if (!err) {
+			if (stats.isFile()) {
+				fs.readFile(filePath, function (err, data) {
+					if (!err) {
+						contentType = CONTENT_TYPES[path.extname(filePath)] || 'text/html'
+						response.writeHead(200, {
+							'Content-Type': contentType
+						});
+						response.write(data);
+						response.end();
+					}
+				});
+			} else if (stats.isDirectory()) {
+				fs.readdir(filePath, function (error, files) {
+					if (!error) {
+						response.writeHead(200, { 'Content-Type': 'text/html' });
+						response.write("<!DOCTYPE html>\n<html><head><meta charset='UTF-8'><title>" + filePath + "</title></head><body>");
+						response.write("<h1>" + filePath + "</h1>");
+						response.write("<ul style='list-style:none;font-family:courier new;'>");
+						files.unshift(".", "..");
+						files.forEach(function (item) {
+							var urlpath = pathname + item,
+								itemStats = cachedStat.fileStatSync(current_dir + urlpath);
+							if (itemStats.isDirectory()) {
+								urlpath += "/";
+								item += "/";
+							}
+							response.write("<li><a href='" + urlpath + "'>" + item + "</a></li>");
+						});
+						response.end("</ul></body></html>");
+					} else {
+						// Read dir error
+						response.writeHead(500, {});
+					}
+				});
+			}
+		} else {
+			response.writeHead(404, {});
+			response.end("File not found!");
+		}
+	});
+}).listen(port);
+
+console.log("Server running at http://localhost" + ((port === 80) ? "" : ":") + port + "/");
+console.log("Base directory at " + current_dir);