├── .gitignore
├── LICENSE
├── README.md
├── demo
    ├── app.js
    └── index.html
├── package.json
└── src
    ├── .babelrc
    ├── .eslintrc.js
    └── index.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | 
 6 | # Runtime data
 7 | pids
 8 | *.pid
 9 | *.seed
10 | 
11 | # Directory for instrumented libs generated by jscoverage/JSCover
12 | lib-cov
13 | 
14 | # Coverage directory used by tools like istanbul
15 | coverage
16 | 
17 | # nyc test coverage
18 | .nyc_output
19 | 
20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
21 | .grunt
22 | 
23 | # node-waf configuration
24 | .lock-wscript
25 | 
26 | # Compiled binary addons (http://nodejs.org/api/addons.html)
27 | build/Release
28 | 
29 | # Dependency directories
30 | node_modules
31 | jspm_packages
32 | 
33 | # Optional npm cache directory
34 | .npm
35 | 
36 | # Optional REPL history
37 | .node_repl_history
38 | demo/bundle.js


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Hector Zarco 
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <img src="http://data.whicdn.com/images/238618455/large.gif" align="right" />
 2 | 
 3 | #Maggie
 4 | > :sunrise: Get precious image info from an input file
 5 | 
 6 | This module does one thing right, returns information about the image selected in a html input file.
 7 | 
 8 | ###Install
 9 | 
10 | ```
11 | $ npm i maggie -S
12 | ```
13 | 
14 | ###Examples
15 | 
16 | **Log image width and height** :fireworks:
17 | 
18 | ```javascript
19 | import {getInfo} from 'maggie';
20 | 
21 | const inputElement = document.getElementById('my-input');
22 | 
23 | getInfo(inputElement, info => {
24 |   console.log(`Image dimensions ${info.width}x${info.height}`);
25 | });
26 | ```
27 | 
28 | **Preview the selected image** :ocean:
29 | 
30 | ```javascript
31 | getInfo('#my-input', info => {
32 |   const preview = document.getElementById('img-preview');
33 | 
34 |   preview.src = info.src;
35 | });
36 | ```
37 | 
38 | **Get the average color** :alien:
39 | 
40 | ```javascript
41 | getInfo('#my-input', info => {
42 |   const data = info.imageData;
43 |   const length = data.length;
44 |   const channelCount = 4; //red, green, blue, alpha
45 |   const colorCount = length / channelCount;
46 |   let red = 0; let green = 0; let blue = 0;
47 | 
48 |   for (let i = 0; i < length; i += channelCount) {
49 |     red += data[i];
50 |     green += data[i + 1];
51 |     blue += data[i + 2];
52 |   }
53 |   
54 |   red = Math.floor(red / colorCount);
55 |   green = Math.floor(green / colorCount);
56 |   blue = Math.floor(blue / colorCount);
57 | 
58 |   console.log(red, green, blue);
59 | });
60 | ```
61 | 
62 | ###Info Object
63 | 
64 | The returned `info` object has the following properties
65 | 
66 | | Property      | Type           | Description
67 | |:-------------:|:--------------:|--------------
68 | | width         | Number         | Image width
69 | | height        | Number         | Image height
70 | | src           | String         | Image source 
71 | | element       | [HTMLImageElement](https://developer.mozilla.org/en/docs/Web/API/HTMLImageElement) | Image Dom element 
72 | | imageData     | [ImageData](https://developer.mozilla.org/en/docs/Web/API/ImageData) | ImageData element based on the image
73 | 
74 | ![](http://new.tinygrab.com/e14c28c92027bb04fa24facdb1a636d33ec8f8c9da.png)
75 | 
76 | ###Author
77 | 
78 | [@zzarcon](https://twitter.com/zzarcon) :beers:


--------------------------------------------------------------------------------
/demo/app.js:
--------------------------------------------------------------------------------
 1 | import {getInfo} from '../src';
 2 | 
 3 | const init = _ => {
 4 |   const input = document.getElementById('my-file');
 5 |   const preview = document.getElementById('preview');
 6 | 
 7 |   getInfo(input, info => {
 8 |     preview.src = info.src;
 9 |     console.log(info)
10 |   });
11 | };
12 | 
13 | document.addEventListener("DOMContentLoaded", init);


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Maggie demo</title>
 6 | </head>
 7 | <body>
 8 |   <input id="my-file" type="file">
 9 |   <br>
10 |   <img src="" alt="" id="preview">
11 |   <script src="bundle.js"></script>
12 | </body>
13 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "maggie",
 3 |   "version": "0.1.2",
 4 |   "description": "Get precious image info from an input file",
 5 |   "main": "src/index.js",
 6 |   "scripts": {
 7 |     "start": "npm-run-all --parallel serve watch",
 8 |     "watch": "watchify demo/app.js -o demo/bundle.js -t [ babelify --presets [ es2015 ] ",
 9 |     "serve": "serve",
10 |     "lint": "eslint ./src",
11 |     "release": "npm version patch && git push --tags && git push"
12 |   },
13 |   "repository": {
14 |     "type": "git",
15 |     "url": "git+https://github.com/zzarcon/maggie.git"
16 |   },
17 |   "author": "zzarcon",
18 |   "license": "MIT",
19 |   "bugs": {
20 |     "url": "https://github.com/zzarcon/maggie/issues"
21 |   },
22 |   "homepage": "https://github.com/zzarcon/maggie#readme",
23 |   "devDependencies": {
24 |     "babel-core": "^6.7.2",
25 |     "babel-eslint": "^6.0.4",
26 |     "babel-preset-es2015": "^6.9.0",
27 |     "babelify": "^7.3.0",
28 |     "browserify": "^13.0.1",
29 |     "eslint": "^2.12.0",
30 |     "eslint-config-airbnb": "^9.0.1",
31 |     "eslint-plugin-import": "^1.8.1",
32 |     "npm-run-all": "^2.1.1",
33 |     "serve": "^1.4.0",
34 |     "watchify": "^3.7.0"
35 |   },
36 |   "browserify": {
37 |     "transform": [
38 |       [
39 |         "babelify",
40 |         {
41 |           "presets": [
42 |             "es2015"
43 |           ]
44 |         }
45 |       ]
46 |     ]
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/src/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015"]
3 | }


--------------------------------------------------------------------------------
/src/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   parser: "babel-eslint",
 3 |   extends: "airbnb/base",
 4 |   rules: {
 5 |     'no-irregular-whitespace': 0,
 6 |     'eol-last': 0,
 7 |     'arrow-body-style': 0,
 8 |     'no-confusing-arrow': 0,
 9 |     'no-return-assign': 1,
10 |     'max-len': 1,
11 |     'no-trailing-spaces': 1
12 |   }
13 | };


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | export const getInfo = (element, callback) => {
 2 |   element = typeof element === 'string' ? document.querySelector(element) : element;
 3 |   element.addEventListener('change', function() {onChange(this, callback)});
 4 | };
 5 | 
 6 | const onChange = (element, callback) => {
 7 |   const file = element.files[0];
 8 |   const reader = new FileReader();
 9 | 
10 |   reader.onload = e => {
11 |     const img = new Image();
12 | 
13 |     img.src = e.target.result;
14 |     img.onload = _ => callback(createInfoObject(img));
15 |   };
16 | 
17 |   reader.readAsDataURL(file);
18 | };
19 | 
20 | const getData = img => {
21 |   const canvas = document.createElement('canvas');
22 |   const context = canvas.getContext('2d');
23 |   const width = canvas.width = img.width;
24 |   const height = canvas.height = img.height;
25 | 
26 |   context.drawImage(img, 0, 0);
27 | 
28 |   return context.getImageData(0, 0, width, height);
29 | };
30 | 
31 | const createInfoObject = img => {
32 |   return {
33 |     width: img.width,
34 |     height: img.height,
35 |     src: img.src,
36 |     element: img,
37 |     imageData: getData(img).data
38 |   };
39 | };


--------------------------------------------------------------------------------