Skip to content

Commit 55af64b

Browse files
author
Johan Junik Jo
committed
cover 80%
1 parent 9fbd85b commit 55af64b

File tree

7 files changed

+276
-110
lines changed

7 files changed

+276
-110
lines changed

README.md

Lines changed: 118 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,137 @@
1-
# image-diff
1+
# vue-image-diff
2+
![Alt Text](example.gif)
23
vue component for multiple image comparison.
4+
currently supported only 8bit jpg and png format.
35

46
Web-App: [https://github.com/whwnsdlr1/image-diff](https://github.com/whwnsdlr1/image-diff)
5-
jsfiddle:
6-
## Build
7-
build project as below
8-
```
9-
git clone https://github.com/whwnsdlr1/vue-image-diff
10-
cd vue-image-diff
11-
yarn run build
12-
```
7+
<br />
8+
jsfiddle1: [https://jsfiddle.net/whwnsdlr1/xgz21e95/](https://jsfiddle.net/whwnsdlr1/xgz21e95/)
9+
<br />
10+
jsfiddle2: 44
11+
<br />
1312

1413
## Usage
15-
1. load images by drag & drop or dialog that you can open by panel click.
16-
2. (optional) if the images are different sizes, the other images will be resized to the first image size.
17-
you can set order of images using file name(index key and value, seperated by two underscore).
18-
ex) barbara__index__0.jpg, cameraman__index__1.jpg, salesman__index__3.png...
19-
3. diff !
14+
in Vue Project
15+
```html
16+
<template>
17+
...
18+
<vue-image-diff :data="data" :options="options" :options-tool-bar="optionsToolBar" />
19+
...
20+
</template>
21+
<script>
22+
import VueImageDiff from 'vue-image-diff'
23+
export default {
24+
...
25+
components: {
26+
'vue-image-diff': VueImageDiff
27+
}
28+
...
29+
}
30+
</script>
31+
```
32+
33+
in html
34+
```html
35+
<body>
36+
<script src="vue.js"></script><!-- include vue.js first! -->
37+
<script src="VueImageDiff.js"></script>
38+
...
39+
<vue-image-diff :data=data :options=options :options-tool-bar=optionsToolBar />
40+
...
41+
</body>
2042
```
21-
mouse & touch drag - panning
22-
mouse wheel & pinch to zoom - zoom in / out
23-
mouse doubleclick - select reference image
43+
data is array of object.
44+
```js
45+
data = [
46+
{
47+
name: 'korea Mountains', // String: text to show overlay region
48+
blob: blob, // Blob: ImageBlob to show
49+
ext: 'jpg' // String: 'jpg' or 'png'
50+
params: {author: 'fxgsell'}, // Object, (optional): default value is {}. text to show overlay region
51+
id: id // String, (optional): default value is created by uuid4(). unique id
52+
}
53+
]
2454
```
2555

26-
- x: coordinate x.
27-
- y: coordinate y.
28-
- scale: scale, scale is applied before coordinate.(panning)
29-
- diff: turn on / off diff mode.
30-
- ref: reference image to diff. you can change ref by frame click in diff mode.
31-
- 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)
32-
- home: move to image load page.
33-
- rearrange: rearrange frames. drag and drop.
34-
- setting
56+
options is object
57+
```js
58+
options = {
59+
coord: {
60+
x: 0, // Number, (optional): default value is 0. coordinate x
61+
y: 0 // Number, (optional): default value is 0. coordinate y
62+
},
63+
zoom: 1, // Number, (optional): default value is calculate by windows. zoom, scale value. 1 is original scale
64+
voi: {
65+
windowCenter: 127, // Number, (optional): default value is 127. range (0, 255]. adjust brightness
66+
windowWidth: 256 // Number, (optional): default value is 256. range (1, 256]. adjust contrast
67+
},
68+
predefinedImageSize: {
69+
width: undefined, // Number or undefined, (optional): default value in undefined. width to be resized. if not set, other images are resized based on the first image size.
70+
height: undefined // Number or undefined, (optional): default value in undefined. height to be resized. if not set, other images are resized based on the first image size.
71+
},
72+
diff: {
73+
activate: false, // Bool, (optional): default value is false. flag to show diff ovelary
74+
reference: {
75+
id: undefined, // String or undefined, (optional): default value is undefined. base image to diff. if not set, it is selected as the first image.
76+
},
77+
tolerance: 1, // Number, (optional): default value is 1. range [1, 441]. 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)
78+
opacity: 0.7, // Number, (optional): default value is 0.7. range (0, 1). opacity of diff overlay
79+
colors: {
80+
same: new Uint8ClampedArray([0, 0, 255]), // Array, (optional): default value is [0, 0, 255]. color rgb of same-tag pixel
81+
diff: new Uint8ClampedArray([255, 0, 0]) // Array, (optional): default value is [0, 0, 255]. color rgb of diff-tag pixel
82+
}
83+
},
84+
style: {
85+
borderWidth: 1, // Number, (optional): default value is [1, infty). border width between frames.
86+
borderColor: new Uint8ClampedArray([255, 0, 0]), // Array, (optional): default value is [255, 0, 0]. color rgb of border
87+
showOverlayText: true, // Bool, (optional): default value is true. flag to show overlay text
88+
frameRowCount: 3 // Number or undefined, (optional): default value is undefined. range [1, infty). frame row count. if not set, calcuate by data length.
89+
}
90+
}
3591
```
36-
- define image size: image size to be resized. only can set before load images.
37-
- show overlay text: show / hidden file name and description.
38-
- frame row count: frames row count.
39-
- border width: border width. limit to [0, 40)
40-
- border color: border color.
92+
93+
options is object
94+
```js
95+
optToolBar = {
96+
show: true, // Bool, (optional)
97+
pan: {
98+
show: true, // Bool, (optional)
99+
disabled: false // Bool, (optional)
100+
},
101+
zoom: {
102+
show: true, // Bool, (optional)
103+
disabled: false // Bool, (optional)
104+
},
105+
diff: {
106+
show: true, // Bool, (optional)
107+
ref: {
108+
show: true // Bool, (optional)
109+
},
110+
tolerance: {
111+
show: true // Bool, (optional)
112+
}
113+
}
114+
}
41115
```
42116

117+
### Control
118+
- mouse & touch drag - panning
119+
- mouse wheel & pinch to zoom - zoom in / out
120+
- mouse doubleclick - select reference image for diff
121+
43122
## Browser support - (tested)
44123
- Google Chrome 77+
45124
- Google Chrome 77+ on Android 9+
46125
- Mozilla FireFox 68+
47126

48127
## Project setup
128+
### Build
129+
build project as below
130+
```
131+
git clone https://github.com/whwnsdlr1/vue-image-diff
132+
cd vue-image-diff
133+
yarn run build
134+
```
49135
### Customize configuration
50136
See [Configuration Reference](https://cli.vuejs.org/config/).
51137

@@ -57,7 +143,6 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
57143
- pngjs: [https://github.com/arian/pngjs](https://github.com/arian/pngjs)
58144
- element-resize-event: [https://github.com/KyleAMathews/element-resize-event](https://github.com/KyleAMathews/element-resize-event)
59145
- vue-lodash: [https://github.com/Ewocker/vue-lodash](https://github.com/Ewocker/vue-lodash)
60-
- vue-toasted: [https://github.com/shakee93/vue-toasted](https://github.com/shakee93/vue-toasted)
61146

62147
### Dev-Dependencies
63148
- @vue/cli-plugin-babel
@@ -66,7 +151,4 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
66151
- babel-eslint
67152
- eslint
68153
- eslint-plugin-vue
69-
- vue-template-compiler
70-
71-
## TO-DO
72-
- support other image format(bmp, tiff)
154+
- vue-template-compiler

example.gif

5.41 MB
Loading

package.json

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
11
{
22
"name": "vue-image-diff",
3-
"version": "1.1.0",
3+
"version": "0.0.0-beta.1",
44
"description": "vue component for multiple image diff",
5-
"keywords": ["image-diff", "image-compare", "image-comparison", "multiple-image-diff", "multiple-image-compare", "multiple-image-comparison"],
5+
"keywords": [
6+
"image-diff",
7+
"image-compare",
8+
"image-comparison",
9+
"multiple-image-diff",
10+
"multiple-image-compare",
11+
"multiple-image-comparison"
12+
],
613
"homepage": "https://github.com/whwnsdlr1/vue-image-diff",
714
"bugs": {
815
"url": "https://github.com/whwnsdlr1/vue-image-diff/issues",
@@ -13,7 +20,11 @@
1320
"JunIk Jo <whwnsdlr1@naver.com> (https://whwnsdlr1.github.io)"
1421
],
1522
"main": "./dist/vue-image-diff.umd.min.js",
16-
"files": ["dist", "src", "public"],
23+
"files": [
24+
"dist",
25+
"src",
26+
"public"
27+
],
1728
"scripts": {
1829
"serve": "vue-cli-service serve",
1930
"build": "vue-cli-service build --target lib --name vueImageDiff --filename vue-image-diff",
@@ -26,8 +37,7 @@
2637
"jpeg-js": "^0.3.6",
2738
"pngjs": "^3.4.0",
2839
"vue": "^2.6.10",
29-
"vue-lodash": "^2.0.2",
30-
"vue-toasted": "^1.1.27"
40+
"vue-lodash": "^2.0.2"
3141
},
3242
"devDependencies": {
3343
"@vue/cli-plugin-babel": "^3.11.0",

0 commit comments

Comments
 (0)