console
var app = new Vue({
el: '#app',
data: {
level: 8,
show: false,
gval_text: "4,5,0,1,0,6,7,1,2,1,3,4,3,2,2,4",
gval: [],
ori_count: [],
ori_p: [],
acm_count: [],
cha_g: [],
trans_rule: [],
trans_show: [],
trans_count: [],
trans_p: [],
trans_acm_count: []
},
methods: {
calcu: function () {
this.gval = this.gval_text.split(/[^\d]+/ig).map(x => { return parseInt(x); });
this.ori_count = Array(this.level).fill(0);
this.ori_p = Array(this.level).fill([0, '']);
this.acm_count = Array(this.level).fill([0, '']);
this.cha_g = Array(this.level).fill([0, '']);
this.trans_rule = Array(this.level).fill([]);
this.trans_show = Array(this.level).fill([]);
this.trans_count = Array(this.level).fill(0);
this.trans_p = Array(this.level).fill(0);
this.trans_acm_count = Array(this.level).fill(0);
for (let v of this.gval) {
if (this.ori_count[v]) vl = this.ori_count[v]++;
else this.ori_count[v] = 1;
}
let acv = 0;
for (let [i, v] of this.ori_count.entries()) {
acv += v;
this.ori_p[i] = [v / this.gval.length, `${v}/${this.gval.length}`];
this.acm_count[i] = [acv / this.gval.length, `${acv}/${this.gval.length}`];
this.cha_g[i] = [parseInt(this.acm_count[i][0] * (this.level - 1) + 0.5), `${this.acm_count[i][0]}*(${this.level}-1)+0.5`];
this.trans_show[i] = [i, this.cha_g[i][0]];
this.trans_rule[this.cha_g[i][0]].push(i);
this.trans_count[this.cha_g[i][0]] += v;
}
acv = 0;
for (let [i, v] of this.trans_count.entries()) {
acv += v;
this.trans_p[i] = [v / this.gval.length, `${v}/${this.gval.length}`];
this.trans_acm_count[i] = [acv / this.gval.length, `${acv}/${this.gval.length}`];
}
this.$forceUpdate();
this.show = true;
}
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>直方图计算</title>
<script src="//cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js">
</script>
</head>
<body>
<div id="app">
<div>灰度等级:<input type="text" v-model.number="level" style="width:15px;"/></div>
<div>像素灰度值:<input type="text" v-model="gval_text" style="width:400px;"/></div>
<div><button @click="calcu">计算</button></div>
<div v-if="show">
<table style="min-width: 50%;">
<tr>
<th>步骤</th>
<th>计算方法或公式</th>
<th :colspan="level">计算结果</th>
</tr>
<tr>
<td>1</td>
<td>列出图像灰度级</td>
<td v-for="n in level" class="val">{{n-1}}</td>
</tr>
<tr>
<td>2</td>
<td>统计原图像各灰度级像素个数ni</td>
<td v-for="n of ori_count" class="val">{{n}}</td>
</tr>
<tr>
<td>3</td>
<td>计算原始直方图 P(i) </td>
<td v-for="n in ori_p" class="val">{{n[0]}}<br/><span class="mini">{{n[1]}}</span></td>
</tr>
<tr>
<td>4</td>
<td>计算累积直方图</td>
<td v-for="n in acm_count" class="val">{{n[0]}}<br/><span class="mini">{{n[1]}}</span></td>
</tr>
<tr>
<td>5</td>
<td>计算变换后的灰度值</td>
<td v-for="n in cha_g" class="val">{{n[0]}}<br/><span class="mini">{{n[1]}}</span></td>
</tr>
<tr>
<td>6</td>
<td>确定灰度变换关系</td>
<td v-for="n in trans_show" class="val">{{n[0]}}->{{n[1]}}</td>
</tr>
<tr>
<td>7</td>
<td>统计变换后各灰度级的像素个数</td>
<td v-for="n in trans_count" class="val">{{n}}</td>
</tr>
<tr>
<td>8</td>
<td>计算变换后的直方图</td>
<td v-for="n in trans_p" class="val">{{n[0]}}<br/><span class="mini">{{n[1]}}</span></td>
</tr>
<tr>
<td>9</td>
<td>计算变换后累积直方图<span class="mini">(这一步不考)</span></td>
<td v-for="n in trans_acm_count" class="val">{{n[0]}}<br/><span class="mini">{{n[1]}}</span></td>
</tr>
</table>
</div>
</div>
</body>
</html>
#app {
font-size: 14px;
}
.val {
text-align: center;
color: red;
}
table,
th,
td {
border: 1px solid blue;
border-collapse: collapse;
}
td {
padding: 10px;
}
td:nth-of-type(1) {
text-align: center;
font-weight: bold;
}
.mini {
font-size: 10px;
color: gray;
}