init

DeKesellars · Sep 24, 2015 · 54987a9 · 54987a9
commit 54987a9
Show file tree

Hide file tree

Showing 7 changed files with 185 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/8bit.js b/8bit.js
@@ -0,0 +1,46 @@
+/**
+ * 8bit
+ *
+ * A function that converts an image into a pixelated version (just like
+ * 8bit artwork).
+ *
+ * @author rogeriopvl <https://github.com/rogeriopvl>
+ * @license MIT
+ */
+
+(function (root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    define([], factory);
+  } else if (typeof exports === 'object') {
+    module.exports = factory();
+  } else {
+    root.eightBit = factory();
+  }
+} (this, function () {
+  /**
+   * Draws a pixelated version of an image in a given canvas
+   * @param {object} canvas - a canvas object
+   * @param {object} image - an image HTMLElement object
+   * @param {number} scale - the scale factor: between 0 and 100
+   */
+  var eightBit = function (canvas, image, scale) {
+    scale *= 0.01;
+
+    canvas.width = image.width;
+    canvas.height = image.height;
+
+    var scaledW = canvas.width * scale;
+    var scaledH = canvas.height * scale;
+
+    var ctx = canvas.getContext('2d');
+
+    ctx.mozImageSmoothingEnabled = false;
+    ctx.webkitImageSmoothingEnabled = false;
+    ctx.imageSmoothingEnabled = false;
+
+    ctx.drawImage(image, 0, 0, scaledW, scaledH);
+    ctx.drawImage(canvas, 0, 0, scaledW, scaledH, 0, 0, image.width, image.height);
+  };
+
+  return eightBit;
+}));
diff --git a/index.js b/index.js
@@ -0,0 +1,46 @@
+/**
+ * 8bit
+ *
+ * A module that converts an image into a pixelated version (just like
+ * 8bit artwork).
+ *
+ * @author rogeriopvl <https://github.com/rogeriopvl>
+ * @license MIT
+ */
+
+(function (root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    define([], factory);
+  } else if (typeof exports === 'object') {
+    module.exports = factory();
+  } else {
+    root.eightBit = factory();
+  }
+} (this, function () {
+  /**
+   * Draws a pixelated version of an image in a given canvas
+   * @param {object} canvas - a canvas object
+   * @param {object} image - an image HTMLElement object
+   * @param {number} scale - the scale factor: between 0 and 100
+   */
+  var eightBit = function (canvas, image, scale) {
+    scale *= 0.01;
+
+    canvas.width = image.width;
+    canvas.height = image.height;
+
+    var scaledW = canvas.width * scale;
+    var scaledH = canvas.height * scale;
+
+    var ctx = canvas.getContext('2d');
+
+    ctx.mozImageSmoothingEnabled = false;
+    ctx.webkitImageSmoothingEnabled = false;
+    ctx.imageSmoothingEnabled = false;
+
+    ctx.drawImage(image, 0, 0, scaledW, scaledH);
+    ctx.drawImage(canvas, 0, 0, scaledW, scaledH, 0, 0, image.width, image.height);
+  };
+
+  return eightBit;
+}));
diff --git a/package.json b/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "8bit",
+  "version": "1.0.0",
+  "description": "Transform images into pixelated versions",
+  "main": "8bit.js",
+  "scripts": {
+    "test": "tape test/*.js"
+  },
+  "keywords": [
+    "eightbit",
+    "8bit",
+    "pixelize",
+    "pixelate",
+    "pixels",
+    "image",
+    "canvas"
+  ],
+  "homepage": "https://rogeriopvl.github.io/8bit",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rogeriopvl/8bit"
+  },
+  "author": "rogeriopvl",
+  "license": "MIT",
+  "devDependencies": {
+    "tape": "^4.2.0"
+  }
+}
diff --git a/test/index.html b/test/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>8bit test</title>
+</head>
+<body>
+    <canvas id="canvas"></canvas>
+
+    <script src="../8bit.js"></script>
+    <script>
+        var img = new Image();
+        img.onload = function () {
+            eightBit(document.getElementById('canvas'), img, 10);
+        };
+        img.src = 'test.png';
+    </script>
+</body>
+</html>
diff --git a/test/main.js b/test/main.js
@@ -0,0 +1,45 @@
+var test = require('tape');
+
+var eightBit = require('../8bit.js');
+
+test('exists as a function', function (t) {
+  t.plan(1);
+  t.equals(typeof eightBit, 'function');
+});
+
+test('passed canvas is resized to the image size', function (t) {
+  t.plan(2);
+
+  var fakeCanvas = {
+    getContext: function () {
+      return {
+        drawImage: function () {}
+      };
+    }
+  };
+  var fakeImage = { width: 300, height: 200 };
+
+  eightBit(fakeCanvas, fakeImage, 30);
+
+  t.equals(fakeCanvas.width, 300);
+  t.equals(fakeCanvas.height, 200);
+});
+
+test('should call context.drawImage two times', function (t) {
+  t.plan(1);
+
+  var fakeCanvas = {
+    drawImageCalls: 0,
+    getContext: function () {
+      var self = this;
+      return {
+        drawImage: function () { self.drawImageCalls++; }
+      };
+    }
+  };
+  var fakeImage = { width: 300, height: 200 };
+
+  eightBit(fakeCanvas, fakeImage, 30);
+
+  t.equals(fakeCanvas.drawImageCalls, 2);
+});
diff --git a/test/test.png b/test/test.png