├── .github
    └── FUNDING.yml
├── .gitignore
├── README.md
├── karma.conf.js
├── package-lock.json
├── package.json
├── res
    ├── input.jpg
    ├── input2.png
    ├── output.png
    ├── output2.png
    ├── palette.png
    └── palette2.png
├── src
    └── sunglass.js
└── webpack.config.js


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
 1 | # These are supported funding model platforms
 2 | 
 3 | github:
 4 | patreon: # Replace with a single Patreon username
 5 | open_collective: # Replace with a single Open Collective username
 6 | ko_fi: # Replace with a single Ko-fi username
 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
 9 | liberapay: # Replace with a single Liberapay username
10 | issuehunt: # Replace with a single IssueHunt username
11 | otechie: # Replace with a single Otechie username
12 | custom: http://zhangwenli.com/blog/tip/
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | node_modules
3 | .DS_Store
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # sunglass 😎
 2 | 
 3 | Convert image into a given color palette.
 4 | 
 5 | |Input Image|Input Palette|Output Image|
 6 | |-|-|-|
 7 | |![](./res/input.jpg)|![](./res/palette.png)|![](./res/output.png)|
 8 | |![](./res/input2.png)|![](./res/palette2.png)|![](./res/output2.png)|
 9 | 
10 | This project was originally created for my [personal website](http://zhangwenli.com);
11 | 
12 | ### API
13 | 
14 | ```
15 | /**
16 |  * Convert image into a given color palette.
17 |  *
18 |  * @param {Image | HTMLCanvasElement} image      input image
19 |  * @param {string[]}                  [palette=['#fff','#999','#555','#222']]
20 |  *                                        colors of output image
21 |  * @param {string}                    [colorSpace='rgb'] color space
22 |  * @return {HTMLCanvasElement}        output image on canvas
23 |  */
24 | sunglass(image[, palette[, colorSpace]])
25 | ```
26 | 
27 | ### Example
28 | 
29 | ```ts
30 | import sunglass from 'sunglass';
31 | 
32 | const img = new Image();
33 | img.onload = () => {
34 |     const palette = ['#d1c4af','#a39990','#363132'];
35 |     const outputCanvas = sunglass(img, palette);
36 |     console.log(outputCanvas.toDataURL()); // base64 string of output image
37 | };
38 | img.src = '...';
39 | ```
40 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
  1 | module.exports = function (config) {
  2 |     config.set({
  3 |         //root path location to resolve paths defined in files and exclude
  4 |         basePath: '',
  5 |         //files/patterns to exclude from loaded files
  6 |         exclude: [],
  7 |         //files/patterns to load in the browser
  8 |         files: [
  9 |             { pattern: 'test/*.js', watched: true, served: true, included: true }
 10 |             /*parameters:
 11 |                 watched: if autoWatch is true all files that have set watched to true will be watched for changes
 12 |                 served: should the files be served by Karma's webserver?
 13 |                 included: should the files be included in the browser using <script> tag?
 14 |                 nocache: should the files be served from disk on each request by Karma's webserver? */
 15 |             /*assets:
 16 |                 {pattern: '*.html', watched:true, served:true, included:false}
 17 |                 {pattern: 'images/*', watched:false, served:true, included:false} */
 18 |         ],
 19 | 
 20 |         //executes the tests whenever one of watched files changes
 21 |         autoWatch: true,
 22 |         //if true, Karma will run tests and then exit browser
 23 |         singleRun: false,
 24 |         //if true, Karma fails on running empty test-suites
 25 |         failOnEmptyTestSuite: false,
 26 |         //reduce the kind of information passed to the bash
 27 |         logLevel: config.LOG_WARN, //config.LOG_DISABLE, config.LOG_ERROR, config.LOG_INFO, config.LOG_DEBUG
 28 | 
 29 |         //list of frameworks you want to use, only jasmine is installed automatically
 30 |         frameworks: ['jasmine'],
 31 |         //list of browsers to launch and capture
 32 |         browsers: ['Chrome'/*,'PhantomJS','Firefox','Edge','ChromeCanary','Opera','IE','Safari'*/],
 33 |         //list of reporters to use
 34 |         reporters: ['mocha', 'kjhtml'/*,'dots','progress','spec'*/],
 35 | 
 36 |         //address that the server will listen on, '0.0.0.0' is default
 37 |         listenAddress: '0.0.0.0',
 38 |         //hostname to be used when capturing browsers, 'localhost' is default
 39 |         hostname: 'localhost',
 40 |         //the port where the web server will be listening, 9876 is default
 41 |         port: 9876,
 42 |         //when a browser crashes, karma will try to relaunch, 2 is default
 43 |         retryLimit: 0,
 44 |         //how long does Karma wait for a browser to reconnect, 2000 is default
 45 |         browserDisconnectTimeout: 5000,
 46 |         //how long will Karma wait for a message from a browser before disconnecting from it, 10000 is default
 47 |         browserNoActivityTimeout: 10000,
 48 |         //timeout for capturing a browser, 60000 is default
 49 |         captureTimeout: 60000,
 50 | 
 51 |         client: {
 52 |             //capture all console output and pipe it to the terminal, true is default
 53 |             captureConsole: false,
 54 |             //if true, Karma clears the context window upon the completion of running the tests, true is default
 55 |             clearContext: false,
 56 |             //run the tests on the same window as the client, without using iframe or a new window, false is default
 57 |             runInParent: false,
 58 |             //true: runs the tests inside an iFrame; false: runs the tests in a new window, true is default
 59 |             useIframe: true,
 60 |             jasmine: {
 61 |                 //tells jasmine to run specs in semi random order, false is default
 62 |                 random: false
 63 |             }
 64 |         },
 65 | 
 66 |         /* karma-webpack config
 67 |            pass your webpack configuration for karma
 68 |            add `babel-loader` to the webpack configuration to make the ES6+ code readable to the browser */
 69 |         webpack: {
 70 |             module: {
 71 |                 rules: [
 72 |                     {
 73 |                         test: /\.js$/i,
 74 |                         exclude: /(node_modules)/,
 75 |                         loader: 'babel-loader',
 76 |                         options: {
 77 |                             presets: ['@babel/preset-env'],
 78 |                             plugins: [
 79 |                                 '@babel/plugin-proposal-object-rest-spread',
 80 |                                 '@babel/plugin-syntax-dynamic-import',
 81 |                                 '@babel/plugin-transform-runtime',
 82 |                                 '@babel/plugin-transform-modules-commonjs'
 83 |                             ]
 84 |                         }
 85 |                     }
 86 |                 ]
 87 |             }
 88 |         },
 89 |         preprocessors: {
 90 |             //add webpack as preprocessor to support require() in test-suits .js files
 91 |             './test/*.js': ['webpack']
 92 |         },
 93 |         webpackMiddleware: {
 94 |             //turn off webpack bash output when run the tests
 95 |             noInfo: true,
 96 |             stats: 'errors-only'
 97 |         },
 98 | 
 99 |         /*karma-mocha-reporter config*/
100 |         mochaReporter: {
101 |             output: 'noFailures'  //full, autowatch, minimal
102 |         }
103 |     });
104 | };
105 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "sunglass",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": ""
 8 |   },
 9 |   "keywords": [],
10 |   "main": "src/sunglass.js",
11 |   "scripts": {
12 |   },
13 |   "author": "Ovilia",
14 |   "license": "MIT",
15 |   "bugs": {
16 |     "url": "https://github.com/Ovilia/sunglass/issues"
17 |   },
18 |   "homepage": "https://github.com/Ovilia/sunglass",
19 |   "dependencies": {
20 |     "canvas": "^2.2.0",
21 |     "color": "^3.1.0"
22 |   },
23 |   "devDependencies": {
24 |     "@babel/core": "^7.4.0",
25 |     "@babel/plugin-proposal-object-rest-spread": "^7.4.0",
26 |     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
27 |     "@babel/plugin-transform-modules-commonjs": "^7.4.0",
28 |     "@babel/plugin-transform-runtime": "^7.4.0",
29 |     "@babel/preset-env": "^7.4.1",
30 |     "@babel/runtime": "^7.4.0",
31 |     "babel-loader": "^8.0.5",
32 |     "jsdom": "^14.0.0",
33 |     "jsdom-global": "^3.0.2",
34 |     "webpack": "^4.29.6",
35 |     "webpack-karma-jasmine": "^3.0.6"
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/res/input.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ovilia/sunglass/a89d7730e43301ce9ae7fe7a2101985ad344a58d/res/input.jpg


--------------------------------------------------------------------------------
/res/input2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ovilia/sunglass/a89d7730e43301ce9ae7fe7a2101985ad344a58d/res/input2.png


--------------------------------------------------------------------------------
/res/output.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ovilia/sunglass/a89d7730e43301ce9ae7fe7a2101985ad344a58d/res/output.png


--------------------------------------------------------------------------------
/res/output2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ovilia/sunglass/a89d7730e43301ce9ae7fe7a2101985ad344a58d/res/output2.png


--------------------------------------------------------------------------------
/res/palette.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ovilia/sunglass/a89d7730e43301ce9ae7fe7a2101985ad344a58d/res/palette.png


--------------------------------------------------------------------------------
/res/palette2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ovilia/sunglass/a89d7730e43301ce9ae7fe7a2101985ad344a58d/res/palette2.png


--------------------------------------------------------------------------------
/src/sunglass.js:
--------------------------------------------------------------------------------
  1 | import Color from 'color';
  2 | 
  3 | /**
  4 |  * Convert image into a given color palette.
  5 |  *
  6 |  * @param {Image | HTMLCanvasElement} image      input image
  7 |  * @param {string[]}                  [palette=['#fff','#999','#555','#222']]
  8 |  *                                        colors of output image
  9 |  * @param {string}                    [colorSpace='rgb'] color space
 10 |  * @return {HTMLCanvasElement}        output image on canvas
 11 |  */
 12 | export default function sunglass(image, palette, colorSpace) {
 13 |     if (!palette) {
 14 |         palette = ['#fff', '#999', '#555', '#222'];
 15 |     }
 16 |     if (!colorSpace) {
 17 |         colorSpace = 'rgb';
 18 |     }
 19 | 
 20 |     const width = image.width;
 21 |     const height = image.height;
 22 |     if (!width || !height) {
 23 |         throw 'Image should have width and height.';
 24 |     }
 25 | 
 26 |     let srcCanvas;
 27 |     let srcCtx;
 28 |     if (image instanceof Image) {
 29 |         srcCanvas = createCanvas(width, height);
 30 |         srcCtx = srcCanvas.getContext('2d');
 31 |         srcCtx.drawImage(image, 0, 0);
 32 |     }
 33 |     else if (image instanceof HTMLCanvasElement) {
 34 |         srcCanvas = image;
 35 |         srcCtx = srcCanvas.getContext('2d');
 36 |     }
 37 |     else {
 38 |         throw 'Image should be instance of Image or HTMLCanvasElement';
 39 |     }
 40 | 
 41 |     const distCanvas = createCanvas(width, height);
 42 |     const distCtx = distCanvas.getContext('2d');
 43 | 
 44 |     const srcPixels = srcCtx.getImageData(0, 0, width, height).data;
 45 |     const distImageData =  distCtx.createImageData(width, height);
 46 |     const distPixels = distImageData.data;
 47 | 
 48 |     for (let i = 0, len = srcPixels.length; i < len; i += 4) {
 49 |         const a = srcPixels[i + 3] / 255;
 50 |         // Take rgb as original color and blending with white with alpha
 51 |         const r = srcPixels[i] * a + 255 * (1 - 1);
 52 |         const g = srcPixels[i + 1] * a + 255 * (1 - 1);
 53 |         const b = srcPixels[i + 2] * a + 255 * (1 - 1);
 54 | 
 55 |         let minDistance = Number.MAX_VALUE;
 56 |         let minDistancePaletteId = null;
 57 |         for (let p = 0; p < palette.length; ++p) {
 58 |             // TODO: cache palette in hsv
 59 |             const d = distance(Color.rgb(r, g, b), Color(palette[p]), colorSpace);
 60 |             if (d < minDistance) {
 61 |                 minDistance = d;
 62 |                 minDistancePaletteId = p;
 63 |             }
 64 |         }
 65 | 
 66 |         // Use closest palette to fill dist image
 67 |         const distColor = Color(palette[minDistancePaletteId]);
 68 |         distPixels[i] = distColor.color[0];
 69 |         distPixels[i + 1] = distColor.color[1];
 70 |         distPixels[i + 2] = distColor.color[2];
 71 |         distPixels[i + 3] = 255;
 72 |     }
 73 |     distCtx.putImageData(distImageData, 0, 0);
 74 | 
 75 |     return distCanvas;
 76 | };
 77 | 
 78 | function distance(srcColor, distColor, colorSpace) {
 79 |     if (colorSpace === 'hsv') {
 80 |         srcColor.hsv();
 81 |         distColor.hsv();
 82 |     }
 83 |     else if (colorSpace === 'hsl') {
 84 |         srcColor.hsl();
 85 |         distColor.hsl();
 86 |     }
 87 |     else if (colorSpace !== 'rgb') {
 88 |         console.warn('Color space ' + colorSpace + ' is not supported. Use RGB now.');
 89 |     }
 90 | 
 91 |     const c1 = srcColor.color;
 92 |     const c2 = distColor.color;
 93 |     return (c1[0] - c2[0]) * (c1[0] - c2[0])
 94 |         + (c1[1] - c2[1]) * (c1[1] - c2[1])
 95 |         + (c1[2] - c2[2]) * (c1[2] - c2[2]);
 96 | }
 97 | 
 98 | function createCanvas(width, height) {
 99 |     const canvas = document.createElement('canvas');
100 |     canvas.width = width;
101 |     canvas.height = height;
102 |     return canvas;
103 | }
104 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | 
 3 | const root = pathname => path.resolve(__dirname, pathname);
 4 | const devMode = process.env.NODE_ENV !== 'production';
 5 | const excludePaths = [/node_modules/];
 6 | 
 7 | module.exports = {
 8 |     mode: process.env.NODE_ENV,
 9 | 
10 |     devtool: devMode ? 'source-map' : false,
11 | 
12 |     context: root('src'),
13 | 
14 |     entry: {
15 |         index: root('src/sunglass.js')
16 |     },
17 | 
18 |     output: {
19 |         path: root('dist'),
20 |         filename: '[name].js',
21 |     },
22 | 
23 |     resolve: {
24 |         extensions: ['.js']
25 |     },
26 | 
27 |     module: {
28 |         rules: [
29 |             {
30 |                 test: /\.js$/,
31 |                 exclude: excludePaths,
32 |                 use: {
33 |                     loader: 'babel-loader',
34 |                     options: {
35 |                         presets: [
36 |                             '@babel/preset-env'
37 |                         ],
38 |                         plugins: [
39 |                             '@babel/plugin-proposal-object-rest-spread',
40 |                             '@babel/plugin-syntax-dynamic-import'
41 |                         ]
42 |                     }
43 |                 }
44 |             }
45 |         ]
46 |     },
47 | 
48 |     plugins: [
49 |     ]
50 | }
51 | 


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