client web application to compare multiple images.
you can pan, zoom and diff multiple images at the same time.
currently support 8bit jpg, png format
this project was built with the Vue framework, vue-image-diff component and many other libraries.
you can online demo in https://whwnsdlr1.github.io/image-diff.
install project as below
git clone https://github.com/whwnsdlr1/image-diff cd image-diff yarn install yarn run serve
and access to http://localhost:port
- load images by drag & drop or dialog that you can open by panel click.
- (optional) if the images are different sizes, the other images will be resized to the first image size. you can set order of images using file name(index key and value, seperated by two underscore). ex) barbara__index__0.jpg, cameraman__index__1.jpg, salesman__index__3.png...
- diff !
- mouse & touch drag - panning - mouse wheel & pinch to zoom - zoom in / out - mouse doubleclick - change reference image for diff - right mouse drag - adjust brightness and contrast - control panel parameter - see [vue-image-diff](https://github.com/whwnsdlr1/vue-image-diff) readme
Browser support - (tested)
- Google Chrome 77+
- Google Chrome 77+ on Android 9+
- Mozilla FireFox 68+
- vue: https://github.com/vuejs/vue
- vue-image-diff: https://github.com/whwnsdlr1/vue-image-diff
- element-resize-event: https://github.com/KyleAMathews/element-resize-event
- vue-lodash: https://github.com/Ewocker/vue-lodash
- vue-toasted: https://github.com/shakee93/vue-toasted