SSIM.js

<!DOCTYPE html> <html lang="en-us"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> <title>SSIM.js</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="theme-color" content="#157878"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="/ssim/assets/css/style.css?v=b4fd1203d00990aafcc47cbe1da74fe63ef8b827"> </head> <body> <section class="page-header"> <h1 class="project-name">SSIM.js</h1> <h2 class="project-tagline">JavaScript SSIM</h2> <a href="https://github.com/obartra/ssim" class="btn">View on GitHub</a> <a href="https://github.com/obartra/ssim/zipball/gh-pages" class="btn">Download .zip</a> <a href="https://github.com/obartra/ssim/tarball/gh-pages" class="btn">Download .tar.gz</a> </section> <section class="main-content"> <h1 id="ssimjs">SSIM.JS</h1> <blockquote> Get a <code class="highlighter-rouge">0</code> to <code class="highlighter-rouge">1</code> score on how similar two images are </blockquote> The closer <a href="https://en.wikipedia.org/wiki/Structural_similarity">SSIM</a> is to <code class="highlighter-rouge">1</code> the higher the similarity. It correlates better with subjective ratings than other measures like <a href="https://en.wikipedia.org/wiki/Peak_signal-to-noise_ratio">PSNR</a> and <a href="https://en.wikipedia.org/wiki/Mean_squared_error">MSE</a>. For instance: <table> <thead> <tr> <th> </th> <th> </th> <th> </th> </tr> </thead> <tbody> <tr> <td><img src="https://raw.githubusercontent.com/obartra/ssim/master/spec/samples/einstein/Q1.gif" alt=""></td> <td><img src="https://raw.githubusercontent.com/obartra/ssim/master/spec/samples/einstein/Q0988.gif" alt=""></td> <td><img src="https://raw.githubusercontent.com/obartra/ssim/master/spec/samples/einstein/Q0913.gif" alt=""></td> </tr> <tr> <td>Original, MSE = 0, SSIM = 1</td> <td>MSE = 144, SSIM = 0.988</td> <td>MSE = 144, SSIM = 0.913</td> </tr> <tr> <td><img src="https://raw.githubusercontent.com/obartra/ssim/master/spec/samples/einstein/Q0840.gif" alt=""></td> <td><img src="https://raw.githubusercontent.com/obartra/ssim/master/spec/samples/einstein/Q0694.gif" alt=""></td> <td><img src="https://raw.githubusercontent.com/obartra/ssim/master/spec/samples/einstein/Q0662.gif" alt=""></td> </tr> <tr> <td>MSE = 144, SSIM = 0.840</td> <td>MSE = 144, SSIM = 0.694</td> <td>MSE = 142, SSIM = 0.662</td> </tr> </tbody> </table> Table extracted from http://www.cns.nyu.edu/~lcv/ssim/ <h2 id="install">🖥 Install</h2> <div class="language-shell highlighter-rouge"> <pre class="highlight"><code>npm install ssim.js </code></pre> </div> This will install the node, web and CLI versions. Install it globally (<code class="highlighter-rouge">npm install -g</code>) to make <code class="highlighter-rouge">ssim</code> available on your path. You can also use the web version directly from <a href="https://unpkg.com">unpkg</a>’s CDN: <code class="highlighter-rouge">https://unpkg.com/ssim.js@</code>. <h2 id="usage">📝 Usage</h2> <a href="https://ssim-comparison.gomix.me/">Playground</a> for Node and Web versions. Node: <div class="language-javascript highlighter-rouge"> <pre class="highlight"><code> import ssim from 'ssim.js'; ssim('./img1.jpg', './img2.jpg') .then(({ mssim, performance }) => console.log(`SSIM: ${mssim} (${performance}ms)`)) .catch(err => console.error('Error generating SSIM', err)); </code></pre> </div> Browser: <div class="language-html highlighter-rouge"> <pre class="highlight"><code> <script src="https://unpkg.com/ssim.js@^2.0.0"></script> <script> ssim('/img1.jpg', '/img2.jpg') .then(function(out) { console.log('SSIM:', out.mssim, '(', out.performance, 'ms)'); }) .catch(function(err) { console.error('Error generating SSIM', err); }); </script> </code></pre> </div> CLI: <div class="language-shell highlighter-rouge"> <pre class="highlight"><code>$ ./node_modules/.bin/ssim ./img1.jpg ./img2.jpg </code></pre> </div> <h2 id="documentation">📖 Documentation</h2> If you run into any issues or want a more info, check the <a href="https://github.com/obartra/ssim/wiki">wiki</a>. The code is fully documented and a hosted version is available <a href="https://doclets.io/obartra/ssim/master">here</a>. <h2 id="rationale">💡 Rationale</h2> This project is a direct port of algorithms published by <a href="/assets/ssim.pdf">Wang, et al. 2004</a> on “Image Quality Assessment: From Error Visibility to Structural Similarity”. The original Matlab scripts are available <a href="https://ece.uwaterloo.ca/~z70wang/research/iwssim/">here</a> with their datasets. To view the steps taken to validate <code class="highlighter-rouge">ssim.js</code> results, check the <a href="https://github.com/obartra/ssim/wiki/Results-Validation">wiki</a>. <footer class="site-footer"> <a href="https://github.com/obartra/ssim">ssim</a> is maintained by <a href="https://github.com/obartra">obartra</a>. This page was generated by <a href="https://pages.github.com">GitHub Pages</a>. </footer> </section> </body> </html>

CINXE.COM

SSIM.js