https://github.com/imgly/rembrandt

Image comparison using node-canvas
https://github.com/imgly/rembrandt

canvas image-comparison javascript testing

Last synced: 3 months ago
JSON representation

Image comparison using node-canvas

• Host: GitHub
• URL: https://github.com/imgly/rembrandt
• Owner: imgly
• License: mit
• Archived: true
• Created: 2016-10-25T06:12:41.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2023-01-11T22:29:14.000Z (about 2 years ago)
• Last Synced: 2024-04-27T00:07:35.656Z (9 months ago)
• Topics: canvas, image-comparison, javascript, testing
• Language: JavaScript
• Size: 3.41 MB
• Stars: 292
• Watchers: 29
• Forks: 18
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        


  

    

  

  

    

  



## Rembrandt.JS - Client- and server-side image comparison library



  



Rembrandt.JS is a image comparison library that works both with the

HTML5 Canvas2D API as well as the drop-in Node.JS replacement

`node-canvas`.

We created Rembrandt.JS to have an easy-to-use image comparison

library for our internal tests for [PhotoEditorSDK](https://www.photoeditorsdk.com/?utm_campaign=Projects&utm_source=Github&utm_medium=Side_Projects&utm_content=Rembrandt&utm_term=HTML5).

Go check it out. It's really awesome. :)

### Installation

#### Node.JS

Please follow the installation instructions over at [node-canvas](https://github.com/Automattic/node-canvas#installation)

in order to correctly install all required system libraries. Afterwards, just run:

`npm install rembrandt`

#### Browser

Download the latest build from our [Releases page](https://github.com/imgly/rembrandt/releases), then

include it like this:

```html

```

The `Rembrandt` JavaScript variable is now globally available.

#### Using module bundlers like Webpack etc.

Install Rembrandt via `npm install rembrandt`, then require it inside your JavaScript like so:

```js

var Rembrandt = require('rembrandt/build/browser')

```

### Usage

Here is an example (ES6 / ES2015):

```js

import Rembrandt from 'rembrandt'

const rembrandt = new Rembrandt({

  // `imageA` and `imageB` can be either Strings (file path on node.js,

  // public url on Browsers) or Buffers

  imageA: '/path/to/imageA',

  imageB: fs.readFileSync('/path/to/imageB'),

  // Needs to be one of Rembrandt.THRESHOLD_PERCENT or Rembrandt.THRESHOLD_PIXELS

  thresholdType: Rembrandt.THRESHOLD_PERCENT,

  // The maximum threshold (0...1 for THRESHOLD_PERCENT, pixel count for THRESHOLD_PIXELS

  maxThreshold: 0.01,

  // Maximum color delta (0...1):

  maxDelta: 0.02,

  // Maximum surrounding pixel offset

  maxOffset: 0,

  renderComposition: true, // Should Rembrandt render a composition image?

  compositionMaskColor: Rembrandt.Color.RED // Color of unmatched pixels

})

// Run the comparison

rembrandt.compare()

  .then(function (result) {

    console.log('Passed:', result.passed)

    console.log('Pixel Difference:', result.differences, 'Percentage Difference', result.percentageDifference, '%')

    console.log('Composition image buffer:', result.compositionImage)

    // Note that `compositionImage` is an Image when Rembrandt.js is run in the browser environment

  })

  .catch((e) => {

    console.error(e)

  })

```

### License

See [LICENSE.md](LICENSE.md)

### Authors and Contributors

Copyright (c) 2016 by [PhotoEditorSDK.com](https://www.photoeditorsdk.com/?utm_campaign=Projects&utm_source=Github&utm_medium=Side_Projects&utm_content=Rembrandt&utm_term=HTML5)