Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings
This repository was archived by the owner on Mar 18, 2024. It is now read-only.

imgly/rembrandt

Repository files navigation

TravisCI Status Slack Status

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

Rembrandt

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. Go check it out. It's really awesome. :)

Installation

Node.JS

Please follow the installation instructions over at node-canvas in order to correctly install all required system libraries. Afterwards, just run:

npm install rembrandt

Browser

Download the latest build from our Releases page, then include it like this:

<script src="/path/to/rembrandt.min.js"></script>

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:

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

Usage

Here is an example (ES6 / ES2015):

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

Authors and Contributors

Copyright (c) 2016 by PhotoEditorSDK.com

About

Image comparison using node-canvas

Topics

Resources

License

Stars

Watchers

Forks

Packages

Contributors

AltStyle によって変換されたページ (->オリジナル) /