Permalink
Browse files

Initial commit

  • Loading branch information...
0 parents commit bc2f2adf8cae20a44668c931175348baf4371f06 @tj tj committed Sep 25, 2012
Showing with 179 additions and 0 deletions.
  1. +2 −0 .gitignore
  2. +11 −0 Makefile
  3. +63 −0 Readme.md
  4. +12 −0 component.json
  5. +49 −0 index.html
  6. +42 −0 index.js
  7. BIN maru.jpg
@@ -0,0 +1,2 @@
+components
+build
@@ -0,0 +1,11 @@
+
+build: components index.js
+ @component build --dev
+
+components:
+ @component install --dev
+
+clean:
+ rm -fr build components template.js
+
+.PHONY: clean
@@ -0,0 +1,63 @@
+
+# convolve
+
+ Canvas [convolution](http://en.wikipedia.org/wiki/Convolution) filter.
+
+ ![](http://f.cl.ly/items/3m1B1n241u0O2U3S0N01/Screen%20Shot%202012-09-25%20at%209.39.59%20AM.png)
+
+## API
+
+### convolve(input, result, width, height, matrix)
+
+ Apply convolution filter `matrix` to the given `input`, populating `result`.
+
+## Example
+
+```js
+var convolve = require('convolve');
+var canvas = document.querySelector('canvas');
+var ctx = canvas.getContext('2d');
+
+var img = new Image;
+img.onload = draw;
+img.src = 'maru.jpg';
+
+var sharpen = [
+ [0, -3, 0],
+ [-3, 21, -3],
+ [0, -3, 0]
+];
+
+var blur = [
+ [1, 1, 1],
+ [1, 1, 1],
+ [1, 1, 1]
+];
+
+var emboss = [
+ [-18, -9, 0],
+ [-9, 9, 9],
+ [0, 9, 18]
+];
+
+var edges = [
+ [0, 9, 0],
+ [9, -36, 9],
+ [0, 9, 0]
+];
+
+function draw() {
+ canvas.width = img.width;
+ canvas.height = img.height;
+ ctx.drawImage(img, 0, 0);
+ var data = ctx.getImageData(0, 0, img.width, img.height);
+ var result = ctx.createImageData(img.width, img.height);
+ convolve(data, result, img.width, img.height, edges);
+ ctx.putImageData(result, 0, 0);
+}
+```
+
+# License
+
+ MIT
+
@@ -0,0 +1,12 @@
+{
+ "name": "convolve",
+ "repo": "component/convolve",
+ "description": "Canvas convolution filters",
+ "version": "0.0.1",
+ "keywords": ["canvas", "sharpen", "blur", "edges"],
+ "dependencies": {},
+ "development": {},
+ "scripts": [
+ "index.js"
+ ]
+}
@@ -0,0 +1,49 @@
+<html>
+ <body>
+ <canvas></canvas>
+ <script src="build/build.js"></script>
+ <script>
+ var convolve = require('convolve');
+ var canvas = document.querySelector('canvas');
+ var ctx = canvas.getContext('2d');
+
+ var img = new Image;
+ img.onload = draw;
+ img.src = 'maru.jpg';
+
+ var sharpen = [
+ [0, -3, 0],
+ [-3, 21, -3],
+ [0, -3, 0]
+ ];
+
+ var blur = [
+ [1, 1, 1],
+ [1, 1, 1],
+ [1, 1, 1]
+ ];
+
+ var emboss = [
+ [-18, -9, 0],
+ [-9, 9, 9],
+ [0, 9, 18]
+ ];
+
+ var edges = [
+ [0, 9, 0],
+ [9, -36, 9],
+ [0, 9, 0]
+ ];
+
+ function draw() {
+ canvas.width = img.width;
+ canvas.height = img.height;
+ ctx.drawImage(img, 0, 0);
+ var data = ctx.getImageData(0, 0, img.width, img.height);
+ var result = ctx.createImageData(img.width, img.height);
+ convolve(data, result, img.width, img.height, edges);
+ ctx.putImageData(result, 0, 0);
+ }
+ </script>
+ </body>
+</html>
@@ -0,0 +1,42 @@
+
+/**
+ * Apply convolution filter `matrix` to the given
+ * `input`, populating `result`.
+ *
+ * @param {ImageData} input
+ * @param {ImageData} result
+ * @param {Number} width
+ * @param {Number} height
+ * @param {Array} matrix
+ * @api public
+ */
+
+module.exports = function(input, result, width, height, matrix){
+ var data = input.data;
+ var out = result.data;
+ var w = matrix[0].length;
+ var h = matrix.length;
+ var half = Math.floor(h / 2);
+ var div = w * h;
+
+ for (var y = 0; y < height - 1; y++) {
+ for (var x = 0; x < width - 1; x++) {
+ var px = (y * width + x) * 4;
+ var r = 0, g = 0, b = 0;
+
+ for (var cy = 0; cy < w; ++cy) {
+ for (var cx = 0; cx < h; ++cx) {
+ var cpx = ((y + (cy - half)) * width + (x + (cx - half))) * 4;
+ r += data[cpx + 0] * matrix[cy][cx];
+ g += data[cpx + 1] * matrix[cy][cx];
+ b += data[cpx + 2] * matrix[cy][cx];
+ }
+ }
+
+ out[px + 0] = r / div;
+ out[px + 1] = g / div;
+ out[px + 2] = b / div;
+ out[px + 3] = data[px + 3];
+ }
+ }
+};
BIN maru.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit bc2f2ad

Please sign in to comment.