Added facedetection support/examples

Author: jwagner

.editorconfig

@@ -0,0 +1,3 @@
+[*.js]
+indent_style = space
+indent_size = 2

.jscsrc

@@ -3,5 +3,6 @@
 	"maximumLineLength": 120,
 	"requireCurlyBraces": null,
     "requireCapitalizedComments": null,
+    "requireTrailingComma": null,
     "disallowKeywordsOnNewLine": null
 }

CONTRIBUTING.md

@@ -0,0 +1,53 @@
+# How to contribute
+
+## Reporting Bugs
+
+When reporting a bug please provide **all** the information needed to quickly reproduce the problem.
+
+This includes:
+- The browser & version used
+- A URL to reproduce the error
+- Other steps other necessary to reproduce the error
+
+If I can't reproduce your problem it will likely not get fixed.
+
+## Contributing Code
+
+### Before Hacking
+To avoid wasting your time please communicate before starting to hack
+on a new feature / change.
+Creating an issue describing your plans is a good start.
+
+### Before submitting a pull request
+- Try to make your code look like the code around it.
+- Provide tests where appropriate.
+- Run JSHint & JSCS on the files you changed, fix any issues related to your changes.
+- Run the tests, make sure they are green
+
+### Please Avoid
+- Reformat my code to fit your personal preferences.
+
+### License
+By contributing your code, you agree to license your contribution under the MIT License.
+
+## Setting up the development environment
+Before you can start working you'll need to have node.js and git installed.
+```
+$ git clone
+$ cd normalmap.js
+$ npm install -g grunt jshint jscs
+$ npm install
+$ grunt
+```
+I work on GNU/Linux. Things might not work on windows.
+
+## Running the tests
+The tests for smartcrop are fairly simplistic at the moment.
+
+You can run them by opening the [/test/](http://localhost:8000/test/)
+folder after running `grunt`.
+
+The tests show the actual output next to the expected output and a diff.
+
+## Code of Conduct
+None. Just be who you are.

LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2014 Jonas Wagner
+Copyright (c) 2016 Jonas Wagner
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,13 +1,14 @@
 # smartcrop.js
 
 Smartcrop.js implements an algorithm to find good crops for images.
+It can be used in the browser, in node or via a CLI.
 
 ![Example](http://29a.ch/sandbox/2014/smartcrop/example.jpg)
 Image: [https://www.flickr.com/photos/endogamia/5682480447/](https://www.flickr.com/photos/endogamia/5682480447) by N. Feans
 
 ## Demos
-* [Test Suite](http://29a.ch/sandbox/2014/smartcrop/examples/testsuite.html), contains over 100 images, **heavy**
-* [Test Bed](http://29a.ch/sandbox/2014/smartcrop/examples/testbed.html), allows you to upload your own images
+* [Test Suite](http://29a.ch/sandbox/2014/smartcrop/examples/testsuite.html), contains over 100 images, **heavy**.
+* [Test Bed](http://29a.ch/sandbox/2014/smartcrop/examples/testbed.html), allows you to test smartcrop with your own images.
 * [Photo transitions](http://29a.ch/sandbox/2014/smartcrop/examples/slideshow.html), automatically creates Ken Burns transitions for a slide show.
 
 ## Algorithm Overview
@@ -16,6 +17,7 @@ Smartcrop.js works using fairly dumb image processing. In short:
 1. Find edges using laplace
 1. Find regions with a color like skin
 1. Find regions high in saturation
+1. Boost regions as specified by options (for example detected faces)
 1. Generate a set of candidate crops using a sliding window
 1. Rank them using an importance function to focus the detail in the center
   and avoid it in the edges.
@@ -37,26 +39,28 @@ Output:
 ```npm install smartcrop```
 or
 ```bower install smartcrop```
-or just download [smartcrop.js](https://raw.githubusercontent.com/jwagner/smartcrop.js/master/smartcrop.js) from the git repo.
+or just download [smartcrop.js](https://raw.githubusercontent.com/jwagner/smartcrop.js/master/smartcrop.js) from the git repository.
 
 Smarcrop requires support for [Promises](http://caniuse.com/#feat=promises),
-use a [polyfill](https://github.com/taylorhakes/promise-polyfill) for unsupported browsers or set `smartcrop.Promise` to your promise implementation
+use a [polyfill](https://github.com/taylorhakes/promise-polyfill) for unsupported browsers or set `smartcrop.Promise` to your favorite promise implementation
 (I recommend [bluebird](http://bluebirdjs.com/)).
 
+## Command Line Interface
+The [smartcrop-cli](https://github.com/jwagner/smartcrop-cli) offers command line interface to smartcrop.js.
 
-## CLI / Node.js
-The [smartcrop-cli](https://github.com/jwagner/smartcrop-cli) offers command line interface to smartcrop.js. It also serves as an example on how to use smartcrop
-from node.
+## Node
+You can use smartcrop from nodejs via either [smartcrop-gm](https://github.com/jwagner/smartcrop-gm) (which is using image magick via gm) or [smartcrop-sharp](https://github.com/jwagner/smartcrop-sharp) (which is using libvips via sharp).
+The [smartcrop-cli](https://github.com/jwagner/smartcrop-cli) can be used as an example of using smartcrop from node.
 
-## Module Formats
+## Supported Module Formats
 
-* common js
-* amd
+* CommonJS
+* AMD
 * global export / window
 
 ## Supported Browsers
 
-See [caniuse.com/canvas](http://caniuse.com/canvas)
+See [caniuse.com/canvas](http://caniuse.com/canvas).
 A [polyfill](https://github.com/taylorhakes/promise-polyfill) for
 [Promises](http://caniuse.com/#feat=promises) is recommended.
 
@@ -84,18 +88,26 @@ You may not use cross-domain images without [CORS](https://en.wikipedia.org/wiki
 
 **height:** height of the crop you want to use.
 
-**debug *(internal)*:** if true, cropResults will contain a debugCanvas.
+**boost:** optional array of regions whose 'interestingness' you want to boost (for example faces). See [boost](#boost);
 
-There are many more (for now undocumented) options available. Check the [source](smartcrop.js#L32) and know that they might change in the future.
+**ruleOfThirds:** optional boolean if set to false it will turn off the rule of thirds composition weight.
+
+**debug *(internal)*:** if true, cropResults will contain a debugCanvas and the complete results array.
+
+There are many more (for now undocumented) options available.
+Check the [source](smartcrop.js#L32) and be advised that they might change in the future.
 
 ### cropResult
+Result of the promise returned by smartcrop.crop.
 ```javascript
 {
-  topCrop: crop,
-  crops: [crop]
+  topCrop: crop
 }
 ```
+
 ### crop
+An invididual crop.
+
 ```javascript
 {
   x: 11, // pixels from the left side
@@ -105,8 +117,22 @@ There are many more (for now undocumented) options available. Check the [source]
 }
 ```
 
-## Tests
+### boost
+Describes a region to boost. A usage example of this is to take
+into account faces in the image. See [smartcrop-cli](https://github.com/jwagner/smartcrop-cli) for an example on how to integrate face detection.
 
+```javascript
+{
+  x: 11, // pixels from the left side
+  y: 20, // pixels from the top
+  width: 1, // pixels
+  height: 1, // pixels
+  weight: 1 // [0, 1]
+}
+```
+
+
+## Tests
 You can run the tests using grunt test. Alternatively you can also just run grunt (the default task) and open http://localhost:8000/test/.
 The test coverage for smartcrop.js is very limited at the moment. I expect to improve this as the code matures and the concepts solidify.
 
@@ -128,5 +154,12 @@ In other words, it's fine to run it on one image, it's not cool to run it on an
 * [smartcrop.py](https://github.com/hhatto/smartcrop.py) by [Hideo Hattori](http://www.hexacosa.net/about/)
 * [smartcrop-rails](https://github.com/sadiqmmm/smartcrop-rails) smartcrop wrapped in a ruby gem by [Mohammed Sadiq](https://github.com/sadiqmmm/)
 
+## Version history
+
+### 1.0
+Refactoring/cleanup to make it easier to use with node.js (dropping the node-canvas dependency) and enable support for boosts which can be used to do face detection.
+This is a 1.0 in the semantic meaning (denoting backwards incompatible API changes).
+It does not denote a finished product.
+
 ## License
 Copyright (c) 2016 Jonas Wagner, licensed under the MIT License (enclosed)

examples/images/slideshow/0.jpg

@@ -0,0 +1,47 @@
+function debugDraw(result, showCrop) {
+  var topCrop = result.debugTopCrop;
+  var options = result.debugOptions;
+  var output = result.debugOutput;
+  var canvas = document.createElement('canvas');
+  canvas.width = output.width;
+  canvas.height = output.height;
+  var ctx = canvas.getContext('2d');
+  ctx.fillStyle = 'rgba(255, 0, 0, 0.1)';
+  ctx.fillRect(topCrop.x, topCrop.y, topCrop.width, topCrop.height);
+  var debugOutput = ctx.createImageData(output.width, output.height);
+  debugOutput.data.set(output.data);
+  for (var y = 0; y < output.height; y++) {
+    for (var x = 0; x < output.width; x++) {
+      var p = (y * output.width + x) * 4;
+      if (showCrop) {
+        var I = smartcrop.importance(options, topCrop, x, y);
+        if (I > 0) {
+          debugOutput.data[p + 1] += I * 32;
+        }
+
+        if (I < 0) {
+          debugOutput.data[p] += I * -64;
+        }
+      }
+      // visualize alpha (boost) as magenta
+      var boost = debugOutput.data[p + 3] / 2;
+      debugOutput.data[p] += boost;
+      debugOutput.data[p + 2] += boost;
+      debugOutput.data[p + 3] = 255;
+    }
+  }
+
+  ctx.putImageData(debugOutput, 0, 0);
+  ctx.strokeStyle = 'rgba(255, 0, 0, 0.8)';
+  if (showCrop) {
+    ctx.strokeRect(topCrop.x, topCrop.y, topCrop.width, topCrop.height);
+  }
+  if (options.boost) {
+    ctx.strokeStyle = 'rgba(255, 255, 255, 1.0)';
+    for (var i = 0; i < options.boost.length; i++) {
+      var b = options.boost[i];
+      ctx.strokeRect(b.x, b.y, b.width, b.height);
+    }
+  }
+  return canvas;
+}

examples/images/slideshow/1.jpg

@@ -29,6 +29,7 @@ input[type=file] {
 input[type=range] {
     width: 300px;
 }
+
 img, canvas { padding: 8px; box-sizing: border-box; max-width: 100%; margin: auto; }
 
 .output {

examples/images/slideshow/2.jpg

@@ -13,7 +13,12 @@ <h1>smartcrop.js testbed</h1>
         <input type=file name=file accept="image/*" >
         <label>Width<div><input name=width type="range" min=50 max=500 step=1 value=250 /><span class=value>250</span>px</div></label>
         <label>Height<div><input name=height type="range" min=50 max=500 step=1 value=250 /><span class=value>250</span>px</div></label>
-        <label>minScale<div><input name=minScale type="range" min=0.5 max=1.0 step=0.1 value=0.9 /><span class=value>0.9</span></div></label>
+        <label>minScale<div><input name=minScale type="range" min=0.5 max=1.0 step=0.1 value=1 /><span class=value>1.0</span></div></label>
+        <p><label>Rule of thirds<input name=ruleOfThirds type="checkbox" value=1 checked /></label></p>
+        <p><strong>Face Detection</strong></p>
+        <div><label><input name=faceDetection type=radio value=off checked />Off</label></div>
+        <div><label><input name=faceDetection type=radio value=jquery />Use <a href="http://facedetection.jaysalvat.com/">jquery.facedetection</a></label></div>
+        <div><label><input name=faceDetection type=radio value=tracking />Use <a href="https://trackingjs.com/">tracking.js</a></label></div>
     </form>
     </div>
     <h2>Drop images on this page to analyze them.</h2>
@@ -28,6 +33,10 @@ <h2>Drop images on this page to analyze them.</h2>
     <script src=jquery.js></script>
     <script src=underscore.js></script>
     <script src="../smartcrop.js"></script>
+    <script src=smartcrop-debug.js></script>
+    <script src=tracking-min.js></script>
+    <script src=tracking-face-min.js></script>
+    <script src=jquery.facedetection.min.js></script>
     <script src=testbed.js>
     </script>
     <script>
@@ -36,7 +45,7 @@ <h2>Drop images on this page to analyze them.</h2>
       _gaq.push(['_setDomainName', '29a.ch']);
       _gaq.push(['_setSiteSpeedSampleRate', 50]);
       _gaq.push(['_trackPageview']);
-      
+
     </script>
     <script src="//www.google-analytics.com/ga.js" async></script>
 </body>