├── .gitignore ├── .github └── FUNDING.yml ├── test └── index.js ├── example └── index.js ├── DOCUMENTATION.md ├── LICENSE ├── package.json ├── CONTRIBUTING.md ├── README.md └── lib └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | *.swp 2 | *.swo 3 | *~ 4 | *.log 5 | node_modules 6 | *.env 7 | .DS_Store 8 | package-lock.json 9 | .bloggify/* 10 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: ionicabizau 2 | patreon: ionicabizau 3 | open_collective: ionicabizau 4 | custom: https://www.buymeacoffee.com/h96wwchmy -------------------------------------------------------------------------------- /test/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const tester = require("tester") 4 | , imgSSIM = require("..") 5 | ; 6 | 7 | tester.describe("img-ssim", t => { 8 | t.should("Get the SSIM similarity between two images.", cb => { 9 | imgSSIM( 10 | "https://octodex.github.com/images/original.png" 11 | , "https://octodex.github.com/images/class-act.png" 12 | , (err, similarity) => { 13 | t.expect(err).toBe(null); 14 | t.expect(similarity > 0.7).toBe(true); 15 | cb(); 16 | }); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /example/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const imgSSIM = require("../lib"); 4 | 5 | imgSSIM( 6 | "https://octodex.github.com/images/original.png" 7 | , "https://octodex.github.com/images/class-act.png" 8 | , (err, similarity) => { 9 | console.log(err || similarity); 10 | // => 0.7683075604309328 11 | }); 12 | 13 | imgSSIM( 14 | "https://octodex.github.com/images/original.png" 15 | , "https://ionicabizau.net/images/logo.png" 16 | , { enforceSameSize: false, resize: true } 17 | , (err, similarity) => { 18 | console.log(err || similarity); 19 | // => 0.2631629323319616 20 | }); 21 | -------------------------------------------------------------------------------- /DOCUMENTATION.md: -------------------------------------------------------------------------------- 1 | ## Documentation 2 | 3 | You can see below the API reference of this module. 4 | 5 | ### `imgSsim(source, target, options, cb)` 6 | Get the structural similarity between two images. 7 | 8 | The `ssim` result will be a value between `0` and `1`. The more similar the images are, the higher the value will be. 9 | 10 | #### Params 11 | 12 | - **String** `source`: The first image path (local path or url). 13 | - **String** `target`: The second image path (local path or url). 14 | - **Object** `options`: An object containing the following fields: 15 | - `windowSize` (Number): The number of pixels of the image splits (default: `8`). 16 | - `enforceSameSize` (Boolean): By default, the images should have the same size. If this option is `false`, this will force the images to be compared, even if they have different sizes. 17 | - `resize` (Boolean): If the images have different sizes, they will be resized if this option is `true`. Default is `false`. 18 | - **Function** `cb`: The callback function. 19 | 20 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016-25 Ionică Bizău (https://ionicabizau.net) 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 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "test": "node test/index.js" 4 | }, 5 | "name": "img-ssim", 6 | "description": "Get the structural similarity between two images.", 7 | "keywords": [ 8 | "img", 9 | "ssim", 10 | "get", 11 | "the", 12 | "similarity", 13 | "between", 14 | "two", 15 | "images" 16 | ], 17 | "license": "MIT", 18 | "version": "1.0.7", 19 | "main": "lib/index.js", 20 | "author": "Ionică Bizău (https://ionicabizau.net)", 21 | "files": [ 22 | "bin/", 23 | "app/", 24 | "lib/", 25 | "dist/", 26 | "src/", 27 | "scripts/", 28 | "resources/", 29 | "menu/", 30 | "cli.js", 31 | "index.js", 32 | "index.d.ts", 33 | "package-lock.json", 34 | "bloggify.js", 35 | "bloggify.json", 36 | "bloggify/" 37 | ], 38 | "repository": { 39 | "type": "git", 40 | "url": "git+ssh://git@github.com/IonicaBizau/img-ssim.git" 41 | }, 42 | "bugs": { 43 | "url": "https://github.com/IonicaBizau/img-ssim/issues" 44 | }, 45 | "homepage": "https://github.com/IonicaBizau/img-ssim#readme", 46 | "dependencies": { 47 | "image-parser": "^1.2.0", 48 | "same-time": "^2.3.1", 49 | "ul": "^5.2.9" 50 | }, 51 | "devDependencies": { 52 | "tester": "^1.3.7" 53 | }, 54 | "blah": { 55 | "h_img": "http://i.imgur.com/tXlhphU.png" 56 | } 57 | } -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # 🌟 Contributing 2 | 3 | Want to contribute to this project? Great! Please read these quick steps to streamline the process and avoid unnecessary tasks. ✨ 4 | 5 | ## 💬 Discuss Changes 6 | Start by opening an issue in the repository using the [bug tracker][1]. Describe your proposed contribution or the bug you've found. If relevant, include platform info and screenshots. 🖼️ 7 | 8 | Wait for feedback before proceeding unless the fix is straightforward, like a typo. 📝 9 | 10 | ## 🔧 Fixing Issues 11 | 12 | Fork the project and create a branch for your fix, naming it `some-great-feature` or `some-issue-fix`. Commit changes while following the [code style][2]. If the project has tests, add one. ✅ 13 | 14 | If a `package.json` or `bower.json` exists, add yourself to the `contributors` array; create it if it doesn't. 🙌 15 | 16 | ```json 17 | { 18 | "contributors": [ 19 | "Your Name (http://your.website)" 20 | ] 21 | } 22 | ``` 23 | 24 | ## 📬 Creating a Pull Request 25 | Open a pull request and reference the initial issue (e.g., *fixes #*). Provide a clear title and consider adding visual aids for clarity. 📊 26 | 27 | ## ⏳ Wait for Feedback 28 | Your contributions will be reviewed. If feedback is given, update your branch as needed, and the pull request will auto-update. 🔄 29 | 30 | ## 🎉 Everyone Is Happy! 31 | Your contributions will be merged, and everyone will appreciate your effort! 😄❤️ 32 | 33 | Thanks! 🤩 34 | 35 | [1]: /issues 36 | [2]: https://github.com/IonicaBizau/code-style -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | [![img-ssim](http://i.imgur.com/tXlhphU.png)](#) 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | # img-ssim 23 | 24 | [![Support me on Patreon][badge_patreon]][patreon] [![Buy me a book][badge_amazon]][amazon] [![PayPal][badge_paypal_donate]][paypal-donations] [![Ask me anything](https://img.shields.io/badge/ask%20me-anything-1abc9c.svg)](https://github.com/IonicaBizau/ama) [![Version](https://img.shields.io/npm/v/img-ssim.svg)](https://www.npmjs.com/package/img-ssim) [![Downloads](https://img.shields.io/npm/dt/img-ssim.svg)](https://www.npmjs.com/package/img-ssim) [![Get help on Codementor](https://cdn.codementor.io/badges/get_help_github.svg)](https://www.codementor.io/@johnnyb?utm_source=github&utm_medium=button&utm_term=johnnyb&utm_campaign=github) 25 | 26 | Buy Me A Coffee 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | > Get the structural similarity between two images. 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | ## :cloud: Installation 53 | 54 | ```sh 55 | # Using npm 56 | npm install --save img-ssim 57 | 58 | # Using yarn 59 | yarn add img-ssim 60 | ``` 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | ## :clipboard: Example 75 | 76 | 77 | 78 | ```js 79 | const imgSSIM = require("img-ssim"); 80 | 81 | imgSSIM( 82 | "https://octodex.github.com/images/original.png" 83 | , "https://octodex.github.com/images/class-act.png" 84 | , (err, similarity) => { 85 | console.log(err || similarity); 86 | // => 0.7683075604309328 87 | }); 88 | 89 | imgSSIM( 90 | "https://octodex.github.com/images/original.png" 91 | , "https://ionicabizau.net/images/logo.png" 92 | , { enforceSameSize: false, resize: true } 93 | , (err, similarity) => { 94 | console.log(err || similarity); 95 | // => 0.2631629323319616 96 | }); 97 | ``` 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | ## :question: Get Help 111 | 112 | There are few ways to get help: 113 | 114 | 115 | 116 | 1. Please [post questions on Stack Overflow](https://stackoverflow.com/questions/ask). You can open issues with questions, as long you add a link to your Stack Overflow question. 117 | 2. For bug reports and feature requests, open issues. :bug: 118 | 3. For direct and quick help, you can [use Codementor](https://www.codementor.io/johnnyb). :rocket: 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | ## :memo: Documentation 127 | 128 | 129 | ### `imgSsim(source, target, options, cb)` 130 | Get the structural similarity between two images. 131 | 132 | The `ssim` result will be a value between `0` and `1`. The more similar the images are, the higher the value will be. 133 | 134 | #### Params 135 | 136 | - **String** `source`: The first image path (local path or url). 137 | - **String** `target`: The second image path (local path or url). 138 | - **Object** `options`: An object containing the following fields: 139 | - `windowSize` (Number): The number of pixels of the image splits (default: `8`). 140 | - `enforceSameSize` (Boolean): By default, the images should have the same size. If this option is `false`, this will force the images to be compared, even if they have different sizes. 141 | - `resize` (Boolean): If the images have different sizes, they will be resized if this option is `true`. Default is `false`. 142 | - **Function** `cb`: The callback function. 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | ## :yum: How to contribute 158 | Have an idea? Found a bug? See [how to contribute][contributing]. 159 | 160 | 161 | ## :sparkling_heart: Support my projects 162 | I open-source almost everything I can, and I try to reply to everyone needing help using these projects. Obviously, 163 | this takes time. You can integrate and use these projects in your applications *for free*! You can even change the source code and redistribute (even resell it). 164 | 165 | However, if you get some profit from this or just want to encourage me to continue creating stuff, there are few ways you can do it: 166 | 167 | 168 | - Starring and sharing the projects you like :rocket: 169 | - [![Buy me a book][badge_amazon]][amazon]—I love books! I will remember you after years if you buy me one. :grin: :book: 170 | - [![PayPal][badge_paypal]][paypal-donations]—You can make one-time donations via PayPal. I'll probably buy a ~~coffee~~ tea. :tea: 171 | - [![Support me on Patreon][badge_patreon]][patreon]—Set up a recurring monthly donation and you will get interesting news about what I'm doing (things that I don't share with everyone). 172 | - **Bitcoin**—You can send me bitcoins at this address (or scanning the code below): `1P9BRsmazNQcuyTxEqveUsnf5CERdq35V6` 173 | 174 | ![](https://i.imgur.com/z6OQI95.png) 175 | 176 | 177 | Thanks! :heart: 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | ## :dizzy: Where is this library used? 195 | If you are using this library in one of your projects, add it in this list. :sparkles: 196 | 197 | - `img-ssim-cli` 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | ## :scroll: License 210 | 211 | [MIT][license] © [Ionică Bizău][website] 212 | 213 | 214 | 215 | 216 | 217 | 218 | [license]: /LICENSE 219 | [website]: https://ionicabizau.net 220 | [contributing]: /CONTRIBUTING.md 221 | [docs]: /DOCUMENTATION.md 222 | [badge_patreon]: https://ionicabizau.github.io/badges/patreon.svg 223 | [badge_amazon]: https://ionicabizau.github.io/badges/amazon.svg 224 | [badge_paypal]: https://ionicabizau.github.io/badges/paypal.svg 225 | [badge_paypal_donate]: https://ionicabizau.github.io/badges/paypal_donate.svg 226 | [patreon]: https://www.patreon.com/ionicabizau 227 | [amazon]: http://amzn.eu/hRo9sIZ 228 | [paypal-donations]: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=RVXDDLKKLQRJW 229 | -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const ImageParser = require("image-parser") 4 | , sameTime = require("same-time") 5 | , ul = require("ul") 6 | ; 7 | 8 | /** 9 | * imgSsim 10 | * Get the structural similarity between two images. 11 | * 12 | * The `ssim` result will be a value between `0` and `1`. The more similar the images are, the higher the value will be. 13 | * 14 | * @name imgSsim 15 | * @function 16 | * @param {String} source The first image path (local path or url). 17 | * @param {String} target The second image path (local path or url). 18 | * @param {Object} options An object containing the following fields: 19 | * 20 | * - `windowSize` (Number): The number of pixels of the image splits (default: `8`). 21 | * - `enforceSameSize` (Boolean): By default, the images should have the same size. If this option is `false`, this will force the images to be compared, even if they have different sizes. 22 | * - `resize` (Boolean): If the images have different sizes, they will be resized if this option is `true`. Default is `false`. 23 | * 24 | * @param {Function} cb The callback function. 25 | */ 26 | module.exports = function imgSsim (source, target, options, cb) { 27 | 28 | if (typeof options === "function") { 29 | cb = options; 30 | options = {}; 31 | } 32 | 33 | options = ul.merge(options, { 34 | windowSize: 8 35 | , K1: 0.01 36 | , K2: 0.03 37 | , luminance: true 38 | , bitsPerComponent: 8 39 | , enforceSameSize: true 40 | , resize: false 41 | }); 42 | 43 | let windowSize = options.windowSize 44 | , K1 = options.K1 45 | , K2 = options.K2 46 | , luminance = options.luminance 47 | , bitsPerComponent = options.bitsPerComponent 48 | ; 49 | 50 | source = new ImageParser(source); 51 | target = new ImageParser(target); 52 | 53 | sameTime([ 54 | done => source.parse(done) 55 | , done => target.parse(done) 56 | ], err => { 57 | if (err) { return cb(err); } 58 | 59 | if (options.enforceSameSize && (source.width() !== target.width() || source.height() !== target.height())) { 60 | return cb(new Error('Images have different sizes!')); 61 | } 62 | 63 | function computeChanges(source, target) { 64 | if (source.width() > target.width()) { 65 | let aux = target; 66 | target = source; 67 | source = aux; 68 | } 69 | 70 | let L = (1 << bitsPerComponent) - 1 71 | , c1 = Math.pow((K1 * L), 2) 72 | , c2 = Math.pow((K2 * L), 2) 73 | , numWindows = 0 74 | , mssim = 0.0 75 | , mcs = 0.0 76 | ; 77 | 78 | function _lumaValuesForWindow(image, x, y, width, height, luminance) { 79 | 80 | let lumaValues = new Float32Array(new ArrayBuffer(width * height * 4)) 81 | , counter = 0 82 | ; 83 | 84 | let maxY = height + y 85 | , maxX = width + x 86 | , lumVals = { 87 | r: luminance ? 0.212655 : 1 88 | , g: luminance ? 0.715158 : 1 89 | , b: luminance ? 0.072187 : 1 90 | } 91 | ; 92 | 93 | 94 | for (let cY = y; cY < maxY; ++cY) { 95 | for (let cX = x; cX < maxX; ++cX) { 96 | let cPixel = image.getPixel(cX, cY) 97 | , res = ( 98 | cPixel.r * lumVals.r 99 | + cPixel.g * lumVals.g 100 | + cPixel.b * lumVals.b 101 | ) * (cPixel.a) 102 | ; 103 | 104 | lumaValues[counter++] = res === res ? res : 0; 105 | } 106 | } 107 | 108 | return lumaValues; 109 | } 110 | 111 | function _averageLuma(lumaValues) { 112 | let sumLuma = 0.0; 113 | for (let i = 0; i < lumaValues.length; i++) { 114 | sumLuma += lumaValues[i]; 115 | } 116 | return sumLuma / lumaValues.length; 117 | } 118 | 119 | function _iterate(image1, image2, windowSize, luminance, callback) { 120 | let width = image1.width() 121 | , height = image1.height() 122 | ; 123 | 124 | for (let y = 0; y < height; y += windowSize) { 125 | for (let x = 0; x < width; x += windowSize) { 126 | 127 | let windowWidth = Math.min(windowSize, width - x) 128 | , windowHeight = Math.min(windowSize, height - y) 129 | , lumaValues1 = _lumaValuesForWindow( 130 | image1 131 | , x, y 132 | , windowWidth, windowHeight 133 | , luminance 134 | ) 135 | , lumaValues2 = _lumaValuesForWindow( 136 | image2 137 | , x, y 138 | , windowWidth, windowHeight 139 | , luminance 140 | ) 141 | , averageLuma1 = _averageLuma(lumaValues1) 142 | , averageLuma2 = _averageLuma(lumaValues2) 143 | ; 144 | 145 | callback(lumaValues1, lumaValues2, averageLuma1, averageLuma2); 146 | } 147 | } 148 | } 149 | 150 | function iteration(lumaValues1, lumaValues2, averageLumaValue1, averageLumaValue2) { 151 | 152 | // calculate variance and covariance 153 | let sigxy = 0 154 | , sigsqx = 0 155 | , sigsqy = 0 156 | ; 157 | 158 | for (let i = 0; i < lumaValues1.length; i++) { 159 | sigsqx += Math.pow((lumaValues1[i] - averageLumaValue1), 2); 160 | sigsqy += Math.pow((lumaValues2[i] - averageLumaValue2), 2); 161 | sigxy += (lumaValues1[i] - averageLumaValue1) * (lumaValues2[i] - averageLumaValue2); 162 | } 163 | 164 | let numPixelsInWin = lumaValues1.length - 1; 165 | sigsqx /= numPixelsInWin; 166 | sigsqy /= numPixelsInWin; 167 | sigxy /= numPixelsInWin; 168 | 169 | // perform ssim calculation on window 170 | let numerator = (2 * averageLumaValue1 * averageLumaValue2 + c1) * (2 * sigxy + c2); 171 | let denominator = ( 172 | Math.pow(averageLumaValue1, 2) 173 | + Math.pow(averageLumaValue2, 2) 174 | + c1 175 | ) * (sigsqx + sigsqy + c2); 176 | 177 | mssim += numerator / denominator; 178 | mcs += (2 * sigxy + c2) / (sigsqx + sigsqy + c2); 179 | 180 | numWindows++; 181 | } 182 | 183 | _iterate(source, target, windowSize, luminance, iteration); 184 | 185 | cb(null, mssim / numWindows, mcs / numWindows); 186 | } 187 | 188 | if (options.resize) { 189 | target.resize(source.width(), source.height(), (err, target) => { 190 | if (err) { return cb(err); } 191 | computeChanges(source, target); 192 | }); 193 | } else { 194 | computeChanges(source, target); 195 | } 196 | }); 197 | }; 198 | --------------------------------------------------------------------------------