Skip to content

Commit 814574b

Browse files
author
Johan Junik Jo
committed
first commit
0 parents  commit 814574b

29 files changed

+120404
-0
lines changed

‎.gitignore‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.DS_Store
2+
node_modules
3+
4+
# local env files
5+
.env.local
6+
.env.*.local
7+
8+
# Log files
9+
npm-debug.log*
10+
yarn-debug.log*
11+
yarn-error.log*
12+
13+
# Editor directories and files
14+
.idea
15+
.vscode
16+
*.suo
17+
*.ntvs*
18+
*.njsproj
19+
*.sln
20+
*.sw?
21+
package-lock.json

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2019 whwnsdlr1
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
# image-diff
2+
![Alt Text](example.gif)
3+
4+
client web application to compare multiple images.
5+
<br />
6+
you can pan, zoom and diff multiple images at the same time.
7+
<br />
8+
currently support 8bit jpg, png format
9+
<br />
10+
this project was built with the Vue framework and many other libraries.
11+
12+
## Demo
13+
you can online demo in [https://whwnsdlr1.github.io/image-diff](https://whwnsdlr1.github.io/image-diff/).
14+
<br />
15+
or
16+
<br />
17+
install project as below
18+
```
19+
git clone https://github.com/whwnsdlr1/image-diff
20+
yarn install
21+
yarn run serve
22+
```
23+
and access to http://localhost:port
24+
25+
## Usage
26+
1. load images by drag & drop or dialog that you can open by panel click.
27+
2. (optional) if the images are different sizes, the other images will be resized to the first image size.
28+
you can set order of images using file name(index key and value, seperated by two underscore).
29+
ex) barbara__index__0.jpg, cameraman__index__1.jpg, salesman__index__3.png...
30+
3. diff !
31+
```
32+
mouse & touch drag - panning
33+
mouse wheel & pinch to zoom - zoom in / out
34+
mouse doubleclick - select reference image
35+
```
36+
37+
- x: coordinate x.
38+
- y: coordinate y.
39+
- scale: scale, scale is applied before coordinate.(panning)
40+
- diff: turn on / off diff mode.
41+
- ref: reference image to diff. you can change ref by frame click in diff mode.
42+
- tolerance: if difference value(Mean Square Error) is greater than or equal tolerance, pixel is set difference-tag. opposite, set same-tag less than tolerance. ![equation](http://latex.codecogs.com/png.latex?%5Csum_%7BP%7D%5E%7Bp%7D%28%5Csqrt%7B%28R_%7Bp1%7D-R_%7Bp2%7D%29%5E%7B2%7D%20&plus;%20%28G_%7Bp1%7D-G_%7Bp2%7D%29%5E%7B2%7D%20&plus;%20%28B_%7Bp1%7D-B_%7Bp2%7D%29%5E%7B2%7D%7D%29)
43+
- home: move to image load page.
44+
- rearrange: rearrange frames. drag and drop.
45+
- setting
46+
```
47+
- define image size: image size to be resized. only can set before load images.
48+
- show overlay text: show / hidden file name and description.
49+
- frame row count: frames row count.
50+
- border width: border width. limit to [0, 40)
51+
- border color: border color.
52+
```
53+
54+
## Browser support - (tested)
55+
- Google Chrome 77+
56+
- Google Chrome 77+ on Android 9+
57+
- Mozilla FireFox 68+
58+
59+
## Project setup
60+
### Customize configuration
61+
See [Configuration Reference](https://cli.vuejs.org/config/).
62+
63+
## Third-party libraries
64+
### Dependencies
65+
- vue: [https://github.com/vuejs/vue](https://github.com/vuejs/vue)
66+
- cornerstone-core: [https://github.com/cornerstonejs/cornerstone](https://github.com/cornerstonejs/cornerstone)
67+
- jpeg-js: [https://github.com/eugeneware/jpeg-js](https://github.com/eugeneware/jpeg-js)
68+
- pngjs: [https://github.com/arian/pngjs](https://github.com/arian/pngjs)
69+
- element-resize-event: [https://github.com/KyleAMathews/element-resize-event](https://github.com/KyleAMathews/element-resize-event)
70+
- vue-lodash: [https://github.com/Ewocker/vue-lodash](https://github.com/Ewocker/vue-lodash)
71+
- vue-toasted: [https://github.com/shakee93/vue-toasted](https://github.com/shakee93/vue-toasted)
72+
73+
### Dev-Dependencies
74+
- @vue/cli-plugin-babel
75+
- @vue/cli-plugin-eslint
76+
- @vue/cli-service
77+
- babel-eslint
78+
- eslint
79+
- eslint-plugin-vue
80+
- sitemap-webpack-plugin
81+
- vue-template-compiler
82+
83+
## TO-DO
84+
- support other image format(bmp, tiff)

‎babel.config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
presets: [
3+
'@vue/app'
4+
]
5+
}

‎dist/demo.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<meta charset="utf-8">
2+
<title>vueImageDiff demo</title>
3+
<script src="https://unpkg.com/vue"></script>
4+
<script src="./vue-image-diff.umd.js"></script>
5+
6+
7+
<div id="app">
8+
<demo></demo>
9+
</div>
10+
11+
<script>
12+
new Vue({
13+
components: {
14+
demo: vueImageDiff
15+
}
16+
}).$mount('#app')
17+
</script>

0 commit comments

Comments
 (0)