console
var app = new Vue({
el: '#app',
data: {
piv: `7 0 7 9 2 3
2 4 6 7 1 5
7 0 7 9 2 3
2 4 6 7 1 5`,
show:false,
frow:3,
fcol:3,
ftype:'mid',
ftype_name: {'mid':'中值','avg':'均值','max':'最大值','min':'最小值'},
pival: [],
result: [],
},
methods: {
calcu: function () {
this.result = [];
this.pival = this.piv.split(/[\r\n]+/).map(row=>{return row.split(/\s+/).map(col=>{return parseInt(col)});});
for(let r=0;r<=this.pival.length-this.frow;r++){
let line = [];
for(let c=0;c<=this.pival[r].length-this.fcol;c++){
let item = {'vals':[],'matrix':[], 'keyval':0};
for(let x=0; x<this.frow; x++){
let sline = [];
for(let y=0; y< this.fcol; y++){
let v = this.pival[r+x][c+y];
sline.push(v);
item['vals'].push(v);
}
item['matrix'].push(sline);
}
if(this.ftype=='mid'){
item['vals'].sort();
item['keyval'] = item['vals'][Math.floor(item['vals'].length/2)];
}
if(this.ftype=='avg'){
let sum = item['vals'].reduce((a, b) => a + b, 0);
let avg = Math.floor(sum / item['vals'].length) || 0;
item['keyval'] = avg;
}
if(this.ftype=='max'){
item['keyval'] = Math.max(...item['vals']);
}
if(this.ftype=='min'){
item['keyval'] = Math.min(...item['vals']);
}
line.push(item);
}
this.result.push(line);
}
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="vue.js"></script>
<style>
#app{
font-size: 14px;
}
.efs{
color: red;
}
table, th, td
{
border: 1px solid blue;
border-collapse:collapse;
}
td{
padding: 10px;
text-align: center;
}
.mini{
font-size: 10px;
color:gray;
}
#piv{
min-width: 30%;
min-height: 200px;
}
table.outter,tr.outter, td.outter{
border: 3px solid blue;
}
</style>
</head>
<body>
<div id="app">
<div>图像灰度值</div>
<div>
<textarea name="piv" id="piv" v-model="piv"></textarea>
</div>
<div>滤波维度：<input type="text" v-model.number="frow" style="width:15px;"/> × <input type="text" v-model.number="fcol" style="width:15px;"/></div>
<div>
<input type="radio" id="midv" value="mid" name="ftype" v-model="ftype" checked="checked">
<label for="midv">中值</label>
<input type="radio" id="avv" value="avg" name="ftype" v-model="ftype">
<label for="avv">均值</label>
<input type="radio" id="avv" value="max" name="ftype" v-model="ftype">
<label for="avv">最大值</label>
<input type="radio" id="avv" value="min" name="ftype" v-model="ftype">
<label for="avv">最小值</label>
</div>
<div><button @click="calcu">计算</button></div>
<div v-if="show">
<div>表格形式描述生成的<span class="efs">{{result.length}}×{{result[0].length}}</span>图像数据</div>
<table style="min-width: 50%;">
<tr v-for="x of result">
<td v-for="y of x">{{y['keyval']}}</td>
</tr>
</table>
<div>中间过程：</div>
<table style="min-width: 50%;" class="outter">
<tr v-for="x of result" class="outter">
<td v-for="y of x" class="outter">
<table>
<tr v-for="xx of y['matrix']">
<td v-for="yy of xx">{{yy}}</td>
</tr>
<tr>
<td :colspan="y['matrix'][0].length">{{ftype_name[ftype]}}={{y['keyval']}}</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>