ffmpeg-image-diff

An image diffing library using FFmpeg. Creates an image showing perceptual differences and returns SSIM data.

Usage no npm install needed!

<script type="module">
  import ffmpegImageDiff from 'https://cdn.skypack.dev/ffmpeg-image-diff';
</script>

README

FFmpeg Image Diff

A NodeJS image diffing library using FFmpeg.
Creates an image showing perceptual differences and returns SSIM data.

Contents

Requirements

This is a thin wrapper around FFmpeg and has no other dependencies.

Install

npm install ffmpeg-image-diff

Usage

Displaying SSIM data only:

const imgDiff = require('ffmpeg-image-diff')

imgDiff(
  referenceImage, // e.g. 'test/lenna.png'
  comparisonImage // e.g. 'test/lenna-edit.png'
)
  .then(ssim => {
    // Sample output: { R: 0.990149, G: 0.991289, B: 0.990579, All: 0.990672 }
    console.log(ssim)
  })
  .catch(error => {
    console.error(error)
  })

Creating a differential image with default options:

const imgDiff = require('ffmpeg-image-diff')

imgDiff(
  referenceImage, // e.g. 'test/lenna.png'
  comparisonImage, // e.g. 'test/lenna-edit.png'
  outputImage, // e.g. 'test/out.png', overwrites an existing file
  {
    ssim: true, // true or false
    similarity: 0.01, // 1.0 - 0.01
    blend: 1.0, // 1.0 - 0.0
    opacity: 0.1, // 1.0 - 0.0
    color: 'magenta' // magenta, yellow, cyan, red green, blue or ''
  }
)
  .then(ssim => {
    // Sample output: { R: 0.990149, G: 0.991289, B: 0.990579, All: 0.990672 }
    console.log(ssim)
  })
  .catch(error => {
    console.error(error)
  })

Options

ssim

If set to false, disables SSIM calculation.
Default: true

similarity

Defines the threshold to identify image differences.
0.01 matches slight differences, while 1.0 only matches stark contrast.
Range: 1.0 - 0.01
Default: 0.01

blend

Blend percentage for the differential pixels.
Higher values result in semi-transparent pixels, with a higher transparency the more similar the pixels color is to the original color.
Range: 1.0 - 0.0
Default: 1.0

opacity

Opacity of the reference image as backdrop for the differential image.
Higher values result in a more opaque background image.
Range: 1.0 - 0.0
Default: 0.1

color

The color balance of the differential pixels.
An empty string displays the default differential pixels.
Set: ['magenta', 'yellow', 'cyan', 'red', 'green', 'blue', '']
Default: 'magenta'

Samples

Reference image

Lenna

Comparison image

Lenna Edit

Output image

Lenna Diff

Testing

  1. Start Docker.
  2. Install development dependencies:
    npm install
  3. Run the tests:
    npm test

License

Released under the MIT license.

Author

Sebastian Tschan