You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
494 lines
22 KiB
494 lines
22 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>DIPFA</title>
|
|
<link rel="stylesheet" href="/css/style.css">
|
|
<link rel="stylesheet" href="/css/index.css">
|
|
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
|
</head>
|
|
<body>
|
|
<div id="app" class="app">
|
|
<div class="aside-section">
|
|
<el-menu
|
|
default-active="0"
|
|
class="aside-menu-vertical"
|
|
@select="selectAsideCollapse">
|
|
<el-menu-item v-for="(menu,i) in asideMenu" :index="i+''" :key="i">
|
|
<i class="el-icon-menu"></i>
|
|
<span slot="title"><span>{{menu}}</span></span>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
|
|
<div class="aside-collapse">
|
|
<el-collapse accordion v-model="currentCollapseName" @change="onCollapseChange">
|
|
<!-- 图像调整 -->
|
|
<template v-if="0 == selectedAsideMenu">
|
|
<el-collapse-item title="裁剪" name="adjust-01">
|
|
<el-button type="primary" @click="startCrop">裁剪</el-button>
|
|
<div>
|
|
宽度：<el-input v-model="displayCropperWidth" @change="setCropperSize"></el-input>
|
|
</div>
|
|
<div>
|
|
高度：<el-input v-model="displayCropperHeight" @change="setCropperSize"></el-input>
|
|
</div>
|
|
</el-collapse-item>
|
|
</template>
|
|
|
|
<!-- 基本计算 -->
|
|
<template v-if="1 == selectedAsideMenu">
|
|
<el-collapse-item title="逻辑运算" name="compute-01[mul]">
|
|
<el-button-group>
|
|
<el-button v-for="(op,i) in logicOp"
|
|
:key="i"
|
|
@click="setCommand(op[0])"
|
|
:type="command===op[0] ? 'primary' : ''"
|
|
size="medium">{{op[1]}}</el-button>
|
|
</el-button-group>
|
|
<el-button type="primary" @click="confirmAction" size="medium">确 定</el-button>
|
|
</el-collapse-item>
|
|
<el-collapse-item title="算术运算" name="compute-02[mul]">
|
|
<el-button-group>
|
|
<el-button v-for="(op,i) in arthimaticOp"
|
|
:key="i"
|
|
@click="setCommand(op[0])"
|
|
:type="command===op[0] ? 'primary' : ''"
|
|
size="medium">{{op[1]}}</el-button>
|
|
</el-button-group>
|
|
</el-button-group>
|
|
<el-button type="primary" @click="confirmAction" size="medium">确 定</el-button>
|
|
</el-collapse-item>
|
|
<el-collapse-item title="几何变换运算" name="compute-03">
|
|
<el-button-group>
|
|
<el-button v-for="(op,i) in geometricOp"
|
|
:key="i"
|
|
@click="setCommand(op[0])"
|
|
:type="command===op[0] ? 'primary' : ''"
|
|
size="medium">{{op[1]}}</el-button>
|
|
</el-button-group>
|
|
</el-button-group>
|
|
<el-form class="geo-form" label-position="right" label-width="78px">
|
|
<template v-if="command==='rotate'">
|
|
<el-form-item label="旋转中心x">
|
|
<el-input v-model="geometricOpArgs.x" size="medium"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="旋转中心y">
|
|
<el-input v-model="geometricOpArgs.y" size="medium"></el-input>
|
|
</el-form-item>
|
|
</template>
|
|
<template v-if="command==='scale' || command==='translate'">
|
|
<el-form-item :label="command==='scale' ? '目标宽度' : 'x平移距离'">
|
|
<el-input v-model="geometricOpArgs.xArg" size="medium"></el-input>
|
|
</el-form-item>
|
|
<el-form-item :label="command==='scale' ? '目标高度' : 'y平移距离'">
|
|
<el-input v-model="geometricOpArgs.yArg" size="medium"></el-input>
|
|
</el-form-item>
|
|
</template>
|
|
<template v-if="command==='rotate'">
|
|
<el-form-item label="旋转角度">
|
|
<el-input v-model="geometricOpArgs.deg" size="medium"></el-input>
|
|
</el-form-item>
|
|
</template>
|
|
</el-form>
|
|
<el-button type="primary" @click="confirmAction(geometricOpArgs)" size="medium">确 定</el-button>
|
|
</el-collapse-item>
|
|
<el-collapse-item title="翻转" name="compute-04">
|
|
<el-button-group>
|
|
<el-button v-for="(op,i) in flipOp"
|
|
:key="i"
|
|
@click="setCommand(op[0])"
|
|
:type="command===op[0] ? 'primary' : ''"
|
|
size="medium">{{op[1]}}</el-button>
|
|
</el-button-group>
|
|
</el-button-group>
|
|
<el-button type="primary" @click="confirmAction" size="medium">确 定</el-button>
|
|
</el-collapse-item>
|
|
<el-collapse-item title="仿射变换" name="compute-05">
|
|
<el-button-group>
|
|
<el-button v-for="(op,i) in affineOp"
|
|
:key="i"
|
|
@click="setCommand(op[0])"
|
|
:type="command===op[0] ? 'primary' : ''"
|
|
size="medium">{{op[1]}}</el-button>
|
|
</el-button-group>
|
|
</el-button-group>
|
|
<el-form class="geo-form" label-position="top" label-width="50px">
|
|
<el-form-item label="pose1">
|
|
<div v-for="(pose, i) in affineArgs.post1" :key="i">
|
|
<span>x{{i+1}} </span><el-input style="width:40%" v-model="affineArgs.post1[i][0]" size="medium" :placeholder="'x'+(i+1)"></el-input>
|
|
<span> y{{i+1}} </span><el-input style="width:40%" v-model="affineArgs.post1[i][1]" size="medium" :placeholder="'y'+(i+1)"></el-input>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="pose2">
|
|
<div v-for="(pose, i) in affineArgs.post2" :key="i">
|
|
<span>x{{i+1}} </span><el-input style="width:40%" v-model="affineArgs.post2[i][0]" size="medium" :placeholder="'x'+(i+1)"></el-input>
|
|
<span> y{{i+1}} </span><el-input style="width:40%" v-model="affineArgs.post2[i][1]" size="medium" :placeholder="'y'+(i+1)"></el-input>
|
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-button type="primary" @click="confirmAction(affineArgs)" size="medium">确 定</el-button>
|
|
</el-collapse-item>
|
|
</template>
|
|
|
|
<!-- 边缘检测 -->
|
|
<template v-if="2 == selectedAsideMenu">
|
|
<el-collapse-item title="边缘检测" name="edge-01">
|
|
<el-button-group>
|
|
<el-button v-for="(op,i) in edgeOp"
|
|
:key="i"
|
|
@click="setCommand(op[0])"
|
|
:type="command===op[0] ? 'primary' : ''"
|
|
size="medium">{{op[1]}}</el-button>
|
|
</el-button-group>
|
|
</el-button-group>
|
|
<el-form class="geo-form" label-position="right" label-width="84px">
|
|
<template v-if="['laplacian','LoG','canny'].indexOf(command) >= 0">
|
|
<el-form-item label="滤波器大小">
|
|
<el-input v-model="edgeArgs.blurSize" size="medium"></el-input>
|
|
</el-form-item>
|
|
<el-form-item v-if="command === 'laplacian'" label="核大小">
|
|
<el-input v-model="edgeArgs.ksize" size="medium"></el-input>
|
|
</el-form-item>
|
|
<template v-if="command === 'canny'">
|
|
<el-form-item label="最低阈值">
|
|
<el-input v-model="edgeArgs.threshold1" size="medium"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="最高阈值">
|
|
<el-input v-model="edgeArgs.threshold2" size="medium"></el-input>
|
|
</el-form-item>
|
|
</template>
|
|
</template>
|
|
</el-form>
|
|
<el-button type="primary" @click="confirmAction(edgeArgs)" size="medium">确 定</el-button>
|
|
</el-collapse-item>
|
|
|
|
<el-collapse-item title="霍弗变换" name="edge-02">
|
|
<el-button-group>
|
|
<el-button v-for="(op,i) in houghOp"
|
|
:key="i"
|
|
@click="setCommand(op[0])"
|
|
:type="command===op[0] ? 'primary' : ''"
|
|
size="medium">{{op[1]}}</el-button>
|
|
</el-button-group>
|
|
</el-button-group>
|
|
<el-form class="geo-form" label-position="right" label-width="84px">
|
|
<el-form-item label="滤波器大小">
|
|
<el-input v-model="houghArgs.blurSize" size="medium"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="canny检测阈值1">
|
|
<el-input v-model="houghArgs.cannyThreshold1" size="medium"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="canny检测阈值2">
|
|
<el-input v-model="houghArgs.cannyThreshold2" size="medium"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="霍夫变换阈值">
|
|
<el-input v-model="houghArgs.houghThreshold" size="medium"></el-input>
|
|
</el-form-item>
|
|
<template v-if="command === 'houghP'">
|
|
<el-form-item label="组成一条直线最小点数">
|
|
<el-input v-model="houghArgs.minLineLength" size="medium"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="同一直线两点最大间隔">
|
|
<el-input v-model="houghArgs.maxLineGap" size="medium"></el-input>
|
|
</el-form-item>
|
|
</template>
|
|
</el-form>
|
|
<el-button type="primary" @click="confirmAction(houghArgs)" size="medium">确 定</el-button>
|
|
</el-collapse-item>
|
|
</template>
|
|
|
|
<!-- 图像增强操作 -->
|
|
<template v-if="3 == selectedAsideMenu">
|
|
<el-collapse-item title="频域的平滑/锐化" name="augment-01">
|
|
<el-button-group>
|
|
<el-button v-for="(op,i) in filterOp1"
|
|
:key="i"
|
|
@click="setCommand(op[0])"
|
|
:type="command===op[0] ? 'primary' : ''"
|
|
size="medium">{{op[1]}}</el-button>
|
|
</el-button-group>
|
|
</el-button-group>
|
|
<el-form class="geo-form" label-position="right" label-width="84px">
|
|
<el-form-item label="d0">
|
|
<el-input v-model="filterArgs1.d0" size="medium"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="n">
|
|
<el-input v-model="filterArgs1.n" size="medium"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-button type="primary" @click="confirmAction(filterArgs1)" size="medium">确 定</el-button>
|
|
</el-collapse-item>
|
|
<el-collapse-item title="空域的平滑/锐化" name="augment-02">
|
|
<el-button-group>
|
|
<el-button v-for="(op,i) in filterOp2"
|
|
:key="i"
|
|
@click="setCommand(op[0])"
|
|
:type="command===op[0] ? 'primary' : ''"
|
|
size="medium">{{op[1]}}</el-button>
|
|
</el-button-group>
|
|
</el-button-group>
|
|
<el-button type="primary" @click="confirmAction" size="medium">确 定</el-button>
|
|
</el-collapse-item>
|
|
</template>
|
|
|
|
<!-- 形态学操作 -->
|
|
<template v-if="4 == selectedAsideMenu">
|
|
<el-collapse-item title="形态学操作" name="morph-01">
|
|
<el-button-group>
|
|
<el-button v-for="(op,i) in morphOp"
|
|
:key="i"
|
|
@click="setCommand(op[0])"
|
|
:type="command===op[0] ? 'primary' : ''"
|
|
size="medium">{{op[1]}}</el-button>
|
|
</el-button-group>
|
|
</el-button-group>
|
|
<el-form class="geo-form" label-position="right" label-width="84px">
|
|
<el-form-item label="结构体X大小">
|
|
<el-input v-model="morphArgs.kernelX" size="medium"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="结构体Y大小">
|
|
<el-input v-model="morphArgs.kernelY" size="medium"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="结构体类型">
|
|
<el-radio-group v-model="morphArgs.kernelType" size="medium">
|
|
<el-radio :label="0">矩形</el-radio>
|
|
<el-radio :label="1">交叉型</el-radio>
|
|
<el-radio :label="2">椭圆形</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-button type="primary" @click="confirmAction(morphArgs)" size="medium">确 定</el-button>
|
|
</el-collapse-item>
|
|
</template>
|
|
|
|
<!-- 噪声滤波 -->
|
|
<template v-if="5 == selectedAsideMenu">
|
|
<el-collapse-item title="噪声" name="noise-01">
|
|
<el-button-group>
|
|
<el-button v-for="(op,i) in noiseOp"
|
|
:key="i"
|
|
@click="setCommand(op[0])"
|
|
:type="command===op[0] ? 'primary' : ''"
|
|
size="medium">{{op[1]}}</el-button>
|
|
</el-button-group>
|
|
</el-button-group>
|
|
<el-form class="geo-form" label-position="right" label-width="100px">
|
|
<template v-if="command === 'spNoise'">
|
|
<el-form-item label="椒盐比">
|
|
<el-input v-model="noiseArgs.svp" size="medium"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="噪声数量比例">
|
|
<el-input v-model="noiseArgs.amount" size="medium"></el-input>
|
|
</el-form-item>
|
|
</template>
|
|
<template v-if="command === 'gaussianNoise'">
|
|
<el-form-item label="均值">
|
|
<el-input v-model="noiseArgs.mean" size="medium"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="标准差">
|
|
<el-input v-model="noiseArgs.sigma" size="medium"></el-input>
|
|
</el-form-item>
|
|
</template>
|
|
</el-form>
|
|
<el-button type="primary" @click="confirmAction(noiseArgs)" size="medium">确 定</el-button>
|
|
</el-collapse-item>
|
|
<el-collapse-item title="滤波" name="blur-01">
|
|
<el-button-group>
|
|
<el-button v-for="(op,i) in blurOp"
|
|
:key="i"
|
|
@click="setCommand(op[0])"
|
|
:type="command===op[0] ? 'primary' : ''"
|
|
size="medium">{{op[1]}}</el-button>
|
|
</el-button-group>
|
|
</el-button-group>
|
|
<el-form class="geo-form" label-position="right" label-width="90px">
|
|
<template v-if="['avgBlur','gaussianBlur'].indexOf(command) >= 0">
|
|
<el-form-item label="滤波器x大小">
|
|
<el-input v-model="blurArgs.x" size="medium"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="滤波器y大小">
|
|
<el-input v-model="blurArgs.y" size="medium"></el-input>
|
|
</el-form-item>
|
|
</template>
|
|
<el-form-item v-else label="滤波核大小">
|
|
<el-input v-model="blurArgs.ksize" size="medium"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-button type="primary" @click="confirmAction(blurArgs)" size="medium">确 定</el-button>
|
|
</el-collapse-item>
|
|
<el-collapse-item title="选择性滤波" name="blur-02">
|
|
<el-button-group>
|
|
<el-button v-for="(op,i) in selectiveOp"
|
|
:key="i"
|
|
@click="setCommand(op[0])"
|
|
:type="command===op[0] ? 'primary' : ''"
|
|
size="medium">{{op[1]}}</el-button>
|
|
</el-button-group>
|
|
</el-button-group>
|
|
<el-form class="geo-form" label-position="right" label-width="72px">
|
|
<el-form-item v-if="command !== 'lowPass'" label="滤波下限">
|
|
<el-input v-model="selectiveArgs.threshold1" size="medium"></el-input>
|
|
</el-form-item>
|
|
<el-form-item v-if="command !== 'highPass'" label="滤波上限">
|
|
<el-input v-model="selectiveArgs.threshold2" size="medium"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-button type="primary" @click="confirmAction(selectiveArgs)" size="medium">确 定</el-button>
|
|
</el-collapse-item>
|
|
</template>
|
|
|
|
<!-- 风格迁移 -->
|
|
<template v-if="6 == selectedAsideMenu">
|
|
<el-collapse-item class="transfer-section" title="固定风格任意内容" name="transfer-01">
|
|
<el-button-group>
|
|
<el-button v-for="(op,i) in transferOp"
|
|
:key="i"
|
|
@click="setCommand(op[0])"
|
|
:type="command===op[0] ? 'primary' : ''"
|
|
size="medium">{{op[1]}}</el-button>
|
|
</el-button-group>
|
|
</el-button-group>
|
|
<el-form class="geo-form" label-position="right" label-width="84px">
|
|
<el-form-item label="风格类型">
|
|
<el-radio-group v-model="transferArgs.model" size="medium">
|
|
<el-radio v-for="model in transferModels" :key="model" :label="model">{{model}}</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-button type="primary" @click="confirmAction(transferArgs)" size="medium">确 定</el-button>
|
|
</el-collapse-item>
|
|
<el-collapse-item class="transfer-section" title="任意风格任意内容" name="transfer-02[mul]">
|
|
<el-button-group>
|
|
<el-button v-for="(op,i) in myTransferOp"
|
|
:key="i"
|
|
@click="setCommand(op[0])"
|
|
:type="command===op[0] ? 'primary' : ''"
|
|
size="medium">{{op[1]}}</el-button>
|
|
</el-button-group>
|
|
</br>
|
|
<el-button type="primary" @click="confirmAction" size="medium">确 定</el-button>
|
|
</el-collapse-item>
|
|
</template>
|
|
|
|
<!-- 其他 -->
|
|
<template v-if="7 == selectedAsideMenu">
|
|
<el-collapse-item title="直方图/色域" name="pther-01">
|
|
<el-button-group>
|
|
<el-button v-for="(op,i) in otherOp"
|
|
:key="i"
|
|
@click="setCommand(op[0])"
|
|
:type="command===op[0] ? 'primary' : ''"
|
|
size="medium">{{op[1]}}</el-button>
|
|
</el-button-group>
|
|
</el-button-group>
|
|
<el-button type="primary" @click="confirmAction" size="medium">确 定</el-button>
|
|
</el-collapse-item>
|
|
</template>
|
|
</el-collapse>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="display-section">
|
|
<div class="img-container">
|
|
<div class="img-info-container" v-if="currentImage !== null ">
|
|
<p v-if="images[currentImage].tag">标签: {{images[currentImage].tag}}</p>
|
|
<p>宽度: {{images[currentImage].width}}</p>
|
|
<p>高度: {{images[currentImage].height}}</p>
|
|
</div>
|
|
|
|
<div class="el-loading-mask" v-if="loading">
|
|
<div class="el-loading-spinner">
|
|
<svg viewBox="25 25 50 50" class="circular"><circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg>
|
|
<p class="el-loading-text">图片处理中</p>
|
|
<el-button size="medium" type="text" @click="cancelAction">取消</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
<vue-cropper
|
|
v-if="inCrop"
|
|
ref="cropper"
|
|
class="img-cropper"
|
|
:img="currentImage === null ? '' : images[currentImage].data"
|
|
:output-size="1"
|
|
:auto-crop="true"
|
|
:auto-crop-width="cropper.width"
|
|
:auto-crop-height="cropper.height"
|
|
:center-box="true"
|
|
:info-true="true"
|
|
:fixed="false"
|
|
:fixed-box="false"
|
|
@real-time="onCropperMove"></vue-cropper>
|
|
<img v-else
|
|
class="current-image"
|
|
:class="multiInput ? 'half-width' : ''"
|
|
:src="currentImage === null ? '' : images[currentImage].data"
|
|
alt="">
|
|
|
|
<!-- second img uploader -->
|
|
<template v-if="currentImage!==null && multiInput">
|
|
<div style="margin: 0 10px;">+</div>
|
|
<el-upload
|
|
class="second-uploader"
|
|
action="#"
|
|
drag
|
|
:show-file-list="false"
|
|
:before-upload="uploadSecondImage">
|
|
<img v-if="secondImage" :src="secondImage" class="second-image">
|
|
<i v-else class="el-icon-plus second-uploader-icon"></i>
|
|
</el-upload>
|
|
</template>
|
|
|
|
<!-- action -->
|
|
<div class="img-action" v-if="inCrop">
|
|
<el-button type="primary" @click="confirmAction">确 定</el-button>
|
|
<el-button @click="cancelAction">取 消</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="img-selector">
|
|
<div class="img-selector-wrapper" v-for="(img,i) in images" :key="i">
|
|
<div class="img-selector-float">
|
|
<span class="img-tag">{{img.tag}}</span>
|
|
<span style="float:right">
|
|
<!-- <i class="action el-icon-price-tag"></i> -->
|
|
<i class="action el-icon-delete" @click="deleteImage(i)"></i>
|
|
</span>
|
|
</div>
|
|
<img class="img-selector-item"
|
|
@click="switchImage(i)"
|
|
:src="img.data"
|
|
alt="">
|
|
</div>
|
|
|
|
<el-upload
|
|
class="img-uploader"
|
|
action="#"
|
|
:show-file-list="false"
|
|
:before-upload="uploadImage">
|
|
<el-button size="small" type="primary">添加图片</el-button>
|
|
</el-upload>
|
|
</div>
|
|
</div>
|
|
|
|
<el-dialog
|
|
title="提示"
|
|
:visible.sync="dialogVisible"
|
|
width="50%">
|
|
<div v-for="(img,i) in resultImage" :key="i">
|
|
<img class="result-image" :src="img" alt="">
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="replaceResultImage" :disabled="resultImage.length > 1">替换当前图像</el-button>
|
|
<el-button type="primary" @click="addResultImage">添加为新图像</el-button>
|
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
</div>
|
|
</body>
|
|
<script src="/js/axios.js"></script>
|
|
<script src="/js/vue.js"></script>
|
|
<script src="/js/element.js"></script>
|
|
<script src="/js/cropper.js"></script>
|
|
<script src="/js/index.js"></script>
|
|
</html> |