diff --git a/README.md b/README.md index 774883b..561835b 100644 --- a/README.md +++ b/README.md @@ -1 +1,46 @@ -# image-diff +# Image Diff + +Real-time image diffing in the browser, powered by WebGL. + +## Installing + +```shell +npm install @rolemodel/image-diff +``` + +or + +```shell +yarn add @rolemodel/image-diff +``` + +## Usage + +```javascript +import ImageDiff from "@rolemodel/image-diff" + +const originalImage = document.getElementById('base-image') +const newImage = document.getElementById('new-image') +const imageDiff = new ImageDiff(originalImage, newImage) + +const result = imageDiff.update({ + diffColor: { r: 1, g: 0, b: 0 }, + diffThreshold: 0.2, + backgroundAlpha: 1.0 +}) + +// result is a canvas element +document.body.appendChild(result) + +imageDiff.dispose() +``` + +Calling `update()` again will re-render the diff. Make sure to call `dispose()` to clean up WebGL resources. + +## Acknowledgments + +**image-diff** is [MIT-licensed](LICENSE), open-source software from [RoleModel Software][rms]. It was initially based on [pixelmatch](https://github.com/mapbox/pixelmatch), using a similar algorithm ported to WebGL. + +[RoleModel Software][rms] is a world-class, collaborative software development team dedicated to delivering the highest quality custom web and mobile software solutions while cultivating a work environment where community, family, learning, and mentoring flourish. + +[rms]: https://rolemodelsoftware.com/