SOURCE

console 命令行工具 X clear

                    
>
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;
}