Skip to content

Commit 42562c7

Browse files
author
dengwen
committed
提取颜色
1 parent e3c7da3 commit 42562c7

19 files changed

+941
-2953
lines changed

‎build/index.es.js‎

Lines changed: 192 additions & 63 deletions
Large diffs are not rendered by default.

‎build/index.js‎

Lines changed: 192 additions & 63 deletions
Large diffs are not rendered by default.

‎index.html‎

Lines changed: 75 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Document</title>
77
<style>
8+
.root{
9+
width: calc(100vw - 700px);
10+
overflow-x: auto;
11+
}
812
div{
913
line-height: 25px;
1014
}
@@ -37,6 +41,14 @@
3741
display: flex;
3842
justify-content: center;
3943
}
44+
#colors{
45+
display: flex;
46+
flex-wrap: wrap;
47+
}
48+
.color{
49+
width: 50px;
50+
height: 50px;
51+
}
4052
</style>
4153
</head>
4254
<body>
@@ -63,43 +75,51 @@ <h3>图片操作选项</h3>
6375
<input type='radio' value='pickColor2' name='action' onchange="changeAction(this.value)" />
6476
<div id="color-block2"></div>
6577
</label>
66-
<label class="flex">
67-
边界自动吸附（找不到临界点则不移动）：
68-
<input type='radio' value='adjust' name='action' onchange="changeAction(this.value)" /> <button id="undo" style="margin-left: 20px;">撤销</button>
69-
</label>
70-
7178
<div class="flex">
7279
色值1/色值2 相似度对比：
7380
<div id="color-block3"></div>
7481
<div id="color-block4"></div>
7582
<button id='compareBtn'>开始对比</button>
7683
</div>
84+
<label class="flex">
85+
边界自动吸附（找不到临界点则不移动）：
86+
<input type='radio' value='adjust' name='action' onchange="changeAction(this.value)" /> <button id="undo" style="margin-left: 20px;">撤销</button>
87+
</label>
7788

7889
<div class="flex">
7990
更换图片：
8091
<input type="file" id="upload" accept="image/png,image/jpeg,image/jpg" />
8192
</div>
8293

94+
<label class="flex">
95+
色彩列表：
96+
<div id="colors"></div>
97+
</label>
98+
8399
<h3>参数配置</h3>
84100
<div class="flex">
85101
色彩边界阈值（阈值越高，相似条件越低）：
86-
<input type='range' id='boundary' name='boundaryValue' value="2" min="2" max="20" step="2"/>
87-
<span id="boundaryText">2</span>
102+
<input type='range' id='boundary' name='boundaryValue' value="10" min="10" max="100" step="2"/>
103+
<span id="boundaryText">10</span>
104+
</div>
105+
<div class="flex">
106+
颜色提取阈值（阈值越高，相似条件越低）：
107+
<input type='range' id='boundary2' name='boundaryValue2' value="0" min="0" max="100" step="2"/>
108+
<span id="boundaryText2">0</span>
88109
</div>
89110
<div class="flex">
90111
边界扫描距离（由内向外）：
91112
<input type='range' id='mockMove' name='mockMovePx' value="30" min="10" max="200" step="10"/>
92-
<span id="mockMoveText">30</span>
113+
<span id="mockMoveText">30px</span>
93114
</div>
94115

95116
</div>
96117
<canvas id='canvas' width="375" height="812"> </canvas>
97-
<!-- <script type="module" src="./build/bundle.js">
98-
</script> -->
99118
<script>
100119
var action = 'pickColor1'
101120
var blockColor1 = [255,255,255]
102121
var blockColor2 = [255,255,255]
122+
var pickColorsValue = []
103123

104124

105125
const canvasDom = document.getElementById('canvas')
@@ -117,21 +137,28 @@ <h3>参数配置</h3>
117137
var main = {
118138
// 初始化
119139
init(){
120-
const imageUrl = 'https://storage.360buyimg.com/dataset-activity-mini/png-jpg-00002-2.jpg'
140+
// const imageUrl = 'https://storage.360buyimg.com/dataset-activity-mini/png-jpg-00002-2.jpg'
141+
// const imageUrl = 'https://img20.360buyimg.com/babel/s1180x940_jfs/t1/147050/6/31926/85670/6357a9afE26ff5c66/3a6823f7820fb72b.jpg'
142+
const imageUrl='https://img10.360buyimg.com/img/jfs/t1/86699/27/29562/39551/62bec631E155c7e41/55d63c89279226f0.jpg'
121143
const width = 500
122144
this.isDrawing = false
123145
this.rects = []
124-
this.boundaryValue = 2
146+
this.boundaryValue = 10
147+
this.boundaryValue2 = 20
125148
this.mockMovePx = 30
126149

150+
this.colors = document.getElementById('colors')
127151
this.colorBlock1 = document.getElementById('color-block1')
128152
this.colorBlock2 = document.getElementById('color-block2')
129153
this.colorBlock3 = document.getElementById('color-block3')
130154
this.colorBlock4 = document.getElementById('color-block4')
131155
this.undo = document.getElementById('undo')
132156

133157
this.boundary = document.getElementById('boundary')
158+
this.boundary2 = document.getElementById('boundary2')
159+
134160
this.boundaryText = document.getElementById('boundaryText')
161+
this.boundaryText2 = document.getElementById('boundaryText2')
135162

136163
this.mockMove = document.getElementById('mockMove')
137164
this.mockMoveText = document.getElementById('mockMoveText')
@@ -151,6 +178,7 @@ <h3>参数配置</h3>
151178

152179
this.initCanvas(width, height)
153180
this.initEvent()
181+
this.pickColors()
154182
}
155183
this.img.src = imageUrl
156184

@@ -195,6 +223,27 @@ <h3>参数配置</h3>
195223
this.ctx.strokeRect(x,y,width,height)
196224
},
197225

226+
// 提取色值
227+
pickColors(){
228+
const colorUtils = new ImageColorUtils({
229+
origin: this.img,
230+
width:this.canvas.width,
231+
height: this.canvas.height,
232+
boundaryValue: this.boundaryValue2,
233+
onload: ()=>{
234+
this.colors.innerHTML=''
235+
const res = colorUtils.pickColors()
236+
console.log( ImageColorUtils.compare([254, 255, 255], [255, 255, 255], this.boundaryValue2, 'hsv'),'hsv')
237+
for(const color of res){
238+
const dom = document.createElement('div')
239+
dom.className='color'
240+
dom.style.background=`rgb(${color})`
241+
this.colors.appendChild(dom)
242+
}
243+
}
244+
})
245+
},
246+
198247
// 事件监听初始化
199248
initEvent(){
200249
let startX
@@ -205,7 +254,6 @@ <h3>参数配置</h3>
205254

206255
function adjust(leftTopPosition, rightBottomPosition) {
207256
const imageColorUtils = new ImageColorUtils({ origin: self.img,width: Math.floor(self.canvas.width), height: Math.floor(self.canvas.height), boundaryValue: self.boundaryValue, mockMovePx: self.mockMovePx })
208-
console.log(imageColorUtils)
209257
return imageColorUtils.adjust(leftTopPosition, rightBottomPosition)
210258
}
211259

@@ -222,16 +270,26 @@ <h3>参数配置</h3>
222270
self.draw()
223271
})
224272

273+
274+
225275
this.boundary.addEventListener('change',(e)=>{
226276
const value = parseInt(e.target.value)
227277
this.boundaryValue = value
228278
this.boundaryText.innerHTML = value
279+
this.pickColors()
280+
})
281+
282+
this.boundary2.addEventListener('change',(e)=>{
283+
const value = parseInt(e.target.value)
284+
this.boundaryValue2 = value
285+
this.boundaryText2.innerHTML = value
286+
this.pickColors()
229287
})
230288

231289
this.mockMove.addEventListener('change',(e)=>{
232290
const value = parseInt(e.target.value)
233291
this.mockMovePx = value
234-
this.mockMoveText.innerHTML = value
292+
this.mockMoveText.innerHTML = value + 'px'
235293
})
236294

237295
this.upload.addEventListener('change',(e)=>{
@@ -245,7 +303,7 @@ <h3>参数配置</h3>
245303
})
246304

247305
this.compareBtn.addEventListener('click', () => {
248-
const result = ImageColorUtils.compare(blockColor1, blockColor2, this.boundaryValue)
306+
const result = ImageColorUtils.compare(blockColor1, blockColor2, this.boundaryValue, 'hsv')
249307
this.compareBtn.innerHTML = `（结果：${result ? '相似': '不相似'}）点击继续对比`
250308
})
251309

@@ -259,25 +317,20 @@ <h3>参数配置</h3>
259317
const pickColor = new ImageColorUtils({
260318
origin: this.img,
261319
width:this.canvas.width,
262-
height: this.canvas.height
320+
height: this.canvas.height,
263321
}).pickColor(x, y)
264322

265-
console.log('pickColor',pickColor)
266323
const color = `rgb(${pickColor[0]},${pickColor[1]},${pickColor[2]})`
267324

268325
if(action === 'pickColor1'){
269326
this.colorBlock1.style.backgroundColor = color
270327
this.colorBlock3.style.backgroundColor = color
271-
272328
blockColor1 = pickColor
273329
} else if(action === 'pickColor2'){
274330
this.colorBlock2.style.backgroundColor = color
275331
this.colorBlock4.style.backgroundColor = color
276-
277332
blockColor2 = pickColor
278333
}
279-
280-
281334
})
282335

283336
this.canvas.addEventListener('mousedown', (e) => {
@@ -319,6 +372,7 @@ <h3>参数配置</h3>
319372

320373

321374
main.init()
375+
322376

323377

324378

‎package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
"module": "./build/index.es.js",
77
"scripts": {
88
"test": "echo \"Error: no test specified\" && exit 1",
9-
"build": "npx rollup -c"
9+
"build": "npx rollup -c ",
10+
"dev": "npx rollup -c -w"
1011
},
1112
"author": "AwesomeDevin <awesomedevin.deng@gmail.com>",
1213
"license": "MIT",
@@ -30,7 +31,8 @@
3031
"@babel/traverse": "^7.15.4",
3132
"@babel/types": "^7.15.4",
3233
"promises-aplus-tests": "^2.1.2",
33-
"rollup-plugin-live-server": "^1.0.3"
34+
"rollup-plugin-live-server": "^1.0.3",
35+
"rollup-plugin-livereload": "^2.0.5"
3436
},
3537
"repository": "https://github.com/o2team/image-color-utils",
3638
"devDependencies": {

‎rollup.config.js‎

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,38 @@
11
import polyfill from 'rollup-plugin-polyfill'
2-
import typescript from 'rollup-plugin-typescript2';
2+
import typescript from 'rollup-plugin-typescript2'
33
import serve from 'rollup-plugin-serve'
44
import commonjs from 'rollup-plugin-commonjs'
5+
import livereload from 'rollup-plugin-livereload'
56
// import {liveServer} from 'rollup-plugin-live-server';
67

7-
let defaults = { compilerOptions: { declaration: true } };
8-
let override = { compilerOptions: { declaration: false } };
8+
let defaults = { compilerOptions: { declaration: true } }
9+
let override = { compilerOptions: { declaration: false } }
910

1011
const plugins = [
1112
typescript({
1213
tsconfigDefaults: defaults,
13-
tsconfig: "tsconfig.json",
14-
tsconfigOverride: override
14+
tsconfig: 'tsconfig.json',
15+
tsconfigOverride: override,
1516
}),
1617
commonjs(),
18+
livereload(),
1719
polyfill(['./imageColorUtils.ts']),
1820
serve({
19-
open: true
20-
})
21+
open: true,
22+
}),
2123
]
2224

2325
export default {
2426
input: './src/imageColorUtils.ts',
25-
output: [{
26-
file: './build/index.es.js',
27-
format: 'es',
28-
},{
29-
file: './build/index.js',
30-
format: 'cjs',
31-
}],
32-
plugins
33-
}
27+
output: [
28+
{
29+
file: './build/index.es.js',
30+
format: 'es',
31+
},
32+
{
33+
file: './build/index.js',
34+
format: 'cjs',
35+
},
36+
],
37+
plugins,
38+
}

0 commit comments

Comments
 (0)