521 lines
28 KiB
HTML
521 lines
28 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title></title>
|
|
<link rel="Shortcut Icon" href="logo.png" type="image/x-icon"/>
|
|
<link rel="stylesheet" href="js/element-ui/index.css"/>
|
|
<link rel="stylesheet" href="css/scan.css"/>
|
|
</head>
|
|
<body>
|
|
<el-container id="container">
|
|
<el-aside width="195px" class="aside">
|
|
<div class="header">
|
|
<i class="el-icon-document"></i>
|
|
图像预览
|
|
</div>
|
|
<div class="scroll" style="overflow: auto;height: calc(100% - 60px);">
|
|
<ul style="margin:auto;padding:0;margin-top:5px">
|
|
<li v-for="(image,index) in urls" :key="image"
|
|
style="padding:10px;padding-right:25px">
|
|
<div style="display:inline;position: relative;">
|
|
<span style="font-size:12px;position: absolute;left:0;width:25px;text-align:right">{{index +
|
|
1}}.</span>
|
|
<el-image :class="{'imageListSelect': selectManyImages.indexOf(index)>=0}"
|
|
ref="imageList" :src="image.src" fit="contain"
|
|
alt="image.imageName" imageIndex="{{index}}"
|
|
lazy
|
|
style="height:150px;margin-left:35px;width:80%;border:2px solid #dedede"
|
|
@click="!$event.ctrlKey && selectImage(image,index)"
|
|
@click.ctrl="selectManyImage(image,index)">
|
|
</el-image>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div style="position: fixed;background-color: #eaeaea;bottom: 0px;width:195px;height:25px;
|
|
line-height: 25px;padding-left:20px;color:#666">
|
|
总张数 {{urls.length}}
|
|
</div>
|
|
</el-aside>
|
|
<el-container>
|
|
<el-header height="auto">
|
|
<div class="menuContainer">
|
|
<ul>
|
|
<!-- <li>
|
|
<el-dropdown>
|
|
<div>
|
|
<div style="text-align: center;">
|
|
<img src="images/icons/setup.png"/>
|
|
</div>
|
|
<span
|
|
>
|
|
书籍拆分排序<i class="el-icon-arrow-down el-icon--right"></i>
|
|
</span>
|
|
</div>
|
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item>
|
|
<div>
|
|
<div class="iconContainer">
|
|
<img src="images/icons/setup.png"/>
|
|
</div>
|
|
<div class="menus">扫描设定</div>
|
|
</div>
|
|
</el-dropdown-item>
|
|
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</li>-->
|
|
<li @click="setup()">
|
|
<div class="iconContainer">
|
|
<img src="images/icons/setup.png"/>
|
|
</div>
|
|
<div class="menus">扫描设定</div>
|
|
</li>
|
|
<li @click="scan()">
|
|
<div class="iconContainer">
|
|
<img src="images/icons/scan.png"/>
|
|
</div>
|
|
<div class="menu">正常扫描</div>
|
|
</li>
|
|
<li @click="insertScan()">
|
|
<div class="iconContainer">
|
|
<img src="images/icons/insertScan.png"/>
|
|
</div>
|
|
<div class="menu">插入扫描</div>
|
|
</li>
|
|
<li @click="exportOfdFile()">
|
|
<div class="iconContainer">
|
|
<img src="images/icons/ofd.png"/>
|
|
</div>
|
|
<div class="menu">导出OFD</div>
|
|
</li>
|
|
<li @click="exportPdfFile()">
|
|
<div class="iconContainer">
|
|
<img src="images/icons/pdf.png"/>
|
|
</div>
|
|
<div class="menu">导出PDF</div>
|
|
</li>
|
|
<li @click="exportTiffFile()">
|
|
<div class="iconContainer">
|
|
<img src="images/icons/tiff.png"/>
|
|
</div>
|
|
<div class="menu">导出Tiff</div>
|
|
</li>
|
|
<li @click="exportZipFile()">
|
|
<div class="iconContainer">
|
|
<img src="images/icons/zip.png"/>
|
|
</div>
|
|
<div class="menu">导出Zip</div>
|
|
</li>
|
|
<li @click="mergeHorizontal(true)">
|
|
<div class="iconContainer">
|
|
<img src="images/icons/merge-horizontal.png"/>
|
|
</div>
|
|
<div class="menu">水平合并</div>
|
|
</li>
|
|
<li @click="mergeHorizontal(false)">
|
|
<div class="iconContainer">
|
|
<img src="images/icons/merge-vertical.png" style="height:31px"/>
|
|
</div>
|
|
<div class="menu">垂直合并</div>
|
|
</li>
|
|
<li @click="bookSort()">
|
|
<div class="iconContainer">
|
|
<img src="images/icons/book_sort.png" style="height:31px"/>
|
|
</div>
|
|
<div class="menu">书籍自动排序</div>
|
|
</li>
|
|
<li @click="exchangeImage()">
|
|
<div class="iconContainer">
|
|
<img src="images/icons/exchange.png" style="height:31px"/>
|
|
</div>
|
|
<div class="menu">图片互换</div>
|
|
</li>
|
|
<li @click="upload()">
|
|
<div class="iconContainer">
|
|
<img src="images/icons/upload.png"/>
|
|
</div>
|
|
<div class="menu">一键上传</div>
|
|
</li>
|
|
<li @click="getLastBatch()">
|
|
<div class="iconContainer">
|
|
<img src="images/icons/betch.png"/>
|
|
</div>
|
|
<div class="menu">最后批次</div>
|
|
</li>
|
|
<li style="border-right:1px solid #dfdfdf;height:26px;margin-top:10px">
|
|
</li>
|
|
<li @click="deleteImage()">
|
|
<div class="iconContainer">
|
|
<img src="images/icons/delImage.png"/>
|
|
</div>
|
|
<div class="menu">删除选定</div>
|
|
</li>
|
|
<li @click="deleteAllImage()">
|
|
<div class="iconContainer">
|
|
<img src="images/icons/delAll.png"/>
|
|
</div>
|
|
<div class="menu">清空列表</div>
|
|
</li>
|
|
<li @click="stopScan()">
|
|
<div class="iconContainer">
|
|
<img src="images/icons/stop.png"/>
|
|
</div>
|
|
<div class="menu">停止扫描</div>
|
|
</li>
|
|
<li @click="resetPatchIndex()">
|
|
<div class="iconContainer">
|
|
<img src="images/icons/stop.png"/>
|
|
</div>
|
|
<div class="menu">重置index</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</el-header>
|
|
<el-main>
|
|
<div class="opt">
|
|
<ul style="margin-left:-40px;line-height:24px">
|
|
<li @click="scaleMax($event)">
|
|
<img src="images/icons/amplify.png" title="放大"></img>
|
|
</li>
|
|
<li @click="scaleMin($event)">
|
|
<img src="images/icons/narrow.png" title="缩小"></img>
|
|
</li>
|
|
<li @click="ajustDimensions($event)">
|
|
<img src="images/icons/auto.png" title="自适应"></img>
|
|
</li>
|
|
<li @click="realDimensions($event)">
|
|
<img src="images/icons/real.png" title="实际大小"></img>
|
|
</li>
|
|
<li @click="addListenerToDiv($event)">
|
|
<img src="images/icons/drag.png" title="拖拽"></img>
|
|
</li>
|
|
<li @click="rotate(-90,$event)">
|
|
<img src="images/icons/left-roate.png" title="左旋90度"></img>
|
|
</li>
|
|
<li @click="rotate(90,$event)">
|
|
<img src="images/icons/right-roate.png" title="右旋90度"></img>
|
|
</li>
|
|
<li @click="rotate(180,$event)">
|
|
<img src="images/icons/roate.png" title="旋转180度"></img>
|
|
</li>
|
|
<li @click="innerErase($event)">
|
|
<img src="images/icons/erase-inner.png" title="内擦除"></img>
|
|
</li>
|
|
<li @click="outerErase($event)">
|
|
<img src="images/icons/erase-outter.png" title="外擦除"></img>
|
|
</li>
|
|
<li @click="rectification($event)" id="rectification">
|
|
<img src="images/icons/rectification.png" title="纠偏"></img>
|
|
</li>
|
|
<li @click="undo($event)">
|
|
<img src="images/icons/undo.png" title="撤销" v-if="undoStack.length>0"></img>
|
|
<img src="images/icons/undogray.png" title="撤销"
|
|
v-if="undoStack.length<=0"></img>
|
|
</li>
|
|
<li @click="redo($event)">
|
|
<img src="images/icons/redo.png" title="前进" v-if="redoStack.length>0"></img>
|
|
<img src="images/icons/redogray.png" title="前进"
|
|
v-if="redoStack.length<=0"></img>
|
|
</li>
|
|
<li @click="split(true,$event)">
|
|
<img src="images/icons/split-horizontal.png" title="垂直拆分"></img>
|
|
</li>
|
|
<li @click="split(false,$event)">
|
|
<img src="images/icons/split-vertical.png" title="水平拆分"></img>
|
|
</li>
|
|
<li @click="save()">
|
|
<img src="images/icons/save.png" title="保存"></img>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="image-container scroll" id="canvas-container" ref="canvasContainer"
|
|
@contextmenu.prevent>
|
|
<div style="position: absolute;z-index:20000;top:30px;right:20px"
|
|
v-if="rectificationDialog">
|
|
<div style="display: flex;">
|
|
<span style="margin-top:8px">拖动旋转</span>
|
|
<el-slider @change="sliderRotateChange" style="width:420px;margin-left:20px"
|
|
v-model="repSliderValue" :min=-360 :max=360 :step=1
|
|
show-input=true input-size="mini"></el-slider>
|
|
</div>
|
|
</div>
|
|
|
|
<canvas id="imageCanvas" height="100%" width="100%"></canvas>
|
|
|
|
</div>
|
|
|
|
|
|
</el-main>
|
|
</el-container>
|
|
<el-dialog
|
|
title="扫描设定"
|
|
:visible.sync="isSetup"
|
|
width="30%">
|
|
<div class="messageBox">
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px"
|
|
style="padding-left:10px">
|
|
<el-tabs v-model="activeName">
|
|
<el-tab-pane label="扫描参数" name="1">
|
|
<el-form-item label="设备" required>
|
|
<el-select v-model="form.device" placeholder="请选择扫描仪" filterable="true">
|
|
<el-option :label="device" :value="device"
|
|
v-for="device in devices">
|
|
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="自动进纸">
|
|
<el-switch v-model="form.autofeeder"></el-switch>
|
|
</el-form-item>
|
|
<el-form-item label="模式">
|
|
<el-radio-group v-model="form.pixel">
|
|
<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-item label="去白页">
|
|
<el-radio-group v-model="form.white">
|
|
<el-radio :label="true">是</el-radio>
|
|
<el-radio :label="false">否</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<div class="block" v-show="form.white">
|
|
<el-slider v-model="form.discardBlankThre" :min="1"
|
|
:max="100"></el-slider>
|
|
</div>
|
|
|
|
|
|
<el-form-item label="去噪点">
|
|
<el-radio-group v-model="form.noiseDetachEnable"
|
|
>
|
|
<el-radio :label="true">开</el-radio>
|
|
<el-radio :label="false">关</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<div class="block"
|
|
v-show="form.noiseDetachEnable">
|
|
<el-slider v-model="form.noiseDetach" :min="10"
|
|
:max="50"></el-slider>
|
|
</div>
|
|
|
|
|
|
<el-form-item label="单双面">
|
|
<el-radio-group v-model="form.single" :disabled="!form.autofeeder">
|
|
<el-radio :label="true">单面</el-radio>
|
|
<el-radio :label="false">双面</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="格式">
|
|
<el-select v-model="form.format" placeholder="请选择格式">
|
|
<el-option label="jpg" value="jpg"></el-option>
|
|
<el-option label="png" value="png"></el-option>
|
|
<el-option label="bmp" value="bmp"></el-option>
|
|
<el-option label="tiff" value="tiff"></el-option>
|
|
<el-option label="pdf" value="pdf"></el-option>
|
|
<el-option label="ofd" value="ofd"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="扫描幅面">
|
|
<el-select v-model="form.paperType" placeholder="请选择幅面">
|
|
<el-option label="匹配原始尺寸" value="Auto"></el-option>
|
|
<el-option label="A3" value="A3"></el-option>
|
|
<el-option label="A4" value="A4"></el-option>
|
|
<el-option label="A4横向" value="A4R"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="图像旋转">
|
|
<el-select v-model="form.orentation" placeholder="请选择旋转角度">
|
|
<el-option label="0度" :value="0"></el-option>
|
|
<el-option label="90度" :value="90"></el-option>
|
|
<el-option label="180度" :value="180"></el-option>
|
|
<el-option label="270度" :value="270"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="图像分割">
|
|
<el-select v-model="form.splitImage" placeholder="图像分割">
|
|
<el-option label="不分割" :value=0></el-option>
|
|
<el-option label="垂直分割" :value="1"></el-option>
|
|
<el-option label="水平分割" :value="2"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="分辨率">
|
|
<el-select v-model="form.resolution" placeholder="请选择分辨率">
|
|
<el-option label="100" value="100"></el-option>
|
|
<el-option label="150" value="150"></el-option>
|
|
<el-option label="200" value="200"></el-option>
|
|
<el-option label="240" value="240"></el-option>
|
|
<el-option label="300" value="300"></el-option>
|
|
<el-option label="600" value="600"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="文件前缀">
|
|
<el-input v-model="form.prefix"
|
|
placeholder="默认前缀"></el-input>
|
|
</el-form-item>
|
|
</el-tab-pane>
|
|
|
|
<el-tab-pane label="上传参数" name="2">
|
|
<el-form-item label="模式">
|
|
<el-radio-group v-model="form.upload.uploadMode">
|
|
<el-radio :label="0">HTTP</el-radio>
|
|
<el-radio :label="1">FTP</el-radio>
|
|
<el-radio :label="2">无</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<div v-if="form.upload.uploadMode=='0'">
|
|
<el-form-item label="地址">
|
|
<el-input v-model="form.upload.httpUrl"
|
|
placeholder="请输入上传地址"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="文件名">
|
|
<el-input v-model="form.upload.fileName"
|
|
placeholder="请输入接收文件参数名"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="上传方式">
|
|
<el-select v-model="form.upload.httpMethod" placeholder="请选择上传方式">
|
|
<el-option label="POST" value="POST"></el-option>
|
|
<el-option label="GET" value="GET"></el-option>
|
|
<el-option label="PUT" value="PUT"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="头(json)">
|
|
<el-input type="textarea" v-model="form.upload.header"
|
|
placeholder="请输入上传时需携带的header信息"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="参数(json)">
|
|
<el-input type="textarea" v-model="form.upload.param"
|
|
placeholder="请输入上传时需携带的参数信息"></el-input>
|
|
</el-form-item>
|
|
</div>
|
|
<div v-if="form.upload.uploadMode=='1'">
|
|
<el-form-item label="地址">
|
|
<el-input v-model="form.upload.ftpUrl"
|
|
placeholder="请输入上传地址"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="端口">
|
|
<el-input v-model="form.upload.ftpPort"
|
|
placeholder="请输入上传端口(默认21)"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="连接模式">
|
|
<el-radio-group v-model="form.upload.ftpMode">
|
|
<el-radio :label="1">主动</el-radio>
|
|
<el-radio :label="2">被动</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="路径">
|
|
<el-input v-model="form.upload.ftpPath"
|
|
placeholder="请输入ftp存放路径(默认/images)"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="用户名">
|
|
<el-input v-model="form.upload.ftpUser"
|
|
placeholder="请输入ftp用户名"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="密码">
|
|
<el-input type="password" v-model="form.upload.ftpPassword"
|
|
placeholder="请输入ftp密码"></el-input>
|
|
</el-form-item>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
|
|
</el-form>
|
|
<el-row style="text-align:center">
|
|
<el-button type="primary" @click="saveSetup()">保存</el-button>
|
|
</el-row>
|
|
</div>
|
|
</el-dialog>
|
|
<el-dialog
|
|
title="一键上传"
|
|
:visible.sync="isUploadAllImage"
|
|
width="30%">
|
|
<div class="messageBox">
|
|
<el-form ref="uploadAllForm" :model="uploadAllForm" :rules="uploadAllRules"
|
|
label-width="80px" style="padding-left:10px">
|
|
<el-form-item label="模式">
|
|
<el-radio-group v-model="uploadAllForm.uploadMode">
|
|
<el-radio :label="0">HTTP</el-radio>
|
|
<el-radio :label="1">FTP</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="上传格式">
|
|
<el-radio-group v-model="uploadAllForm.format">
|
|
<el-radio :label="0">ofd</el-radio>
|
|
<el-radio :label="1">pdf</el-radio>
|
|
<el-radio :label="2">zip</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<div v-if="uploadAllForm.uploadMode=='0'">
|
|
<el-form-item label="地址">
|
|
<el-input v-model="uploadAllForm.httpUrl" placeholder="请输入上传地址"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="文件名">
|
|
<el-input v-model="uploadAllForm.fileName"
|
|
placeholder="请输入接收文件参数名"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="上传方式">
|
|
<el-select v-model="uploadAllForm.httpMethod" placeholder="请选择上传方式">
|
|
<el-option label="POST" value="POST"></el-option>
|
|
<el-option label="GET" value="GET"></el-option>
|
|
<el-option label="PUT" value="PUT"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="头(json)">
|
|
<el-input type="textarea" v-model="uploadAllForm.header"
|
|
placeholder="请输入上传时需携带的header信息"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="参数(json)">
|
|
<el-input type="textarea" v-model="uploadAllForm.param"
|
|
placeholder="请输入上传时需携带的参数信息"></el-input>
|
|
</el-form-item>
|
|
</div>
|
|
<div v-if="uploadAllForm.uploadMode=='1'">
|
|
<el-form-item label="地址">
|
|
<el-input v-model="uploadAllForm.ftpUrl" placeholder="请输入上传地址"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="端口">
|
|
<el-input v-model="uploadAllForm.ftpPort"
|
|
placeholder="请输入上传端口(默认21)"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="连接模式">
|
|
<el-radio-group v-model="uploadAllForm.ftpMode">
|
|
<el-radio :label="1">主动</el-radio>
|
|
<el-radio :label="2">被动</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="路径">
|
|
<el-input v-model="uploadAllForm.ftpPath"
|
|
placeholder="请输入ftp存放路径(默认/images)"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="用户名">
|
|
<el-input v-model="uploadAllForm.ftpUser"
|
|
placeholder="请输入ftp用户名"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="密码">
|
|
<el-input type="password" v-model="uploadAllForm.ftpPassword"
|
|
placeholder="请输入ftp密码"></el-input>
|
|
</el-form-item>
|
|
</div>
|
|
</el-form>
|
|
<el-row style="text-align:center">
|
|
<el-button type="primary" @click="uploadAllImage()">保存</el-button>
|
|
</el-row>
|
|
</div>
|
|
</el-dialog>
|
|
</el-container>
|
|
<script src="js/polyfill.min.js"></script>
|
|
<script src="js/vue.min.js"></script>
|
|
<script src="js/element-ui/index.js"></script>
|
|
<script src="js/jquery-1.11.1.min.js"></script>
|
|
<script src="js/fabric.js"></script>
|
|
<script src="js/socket.io.dev.js"></script>
|
|
<script src="js/WebScan.js"></script>
|
|
<script src="js/util.js"></script>
|
|
<script src="js/FileSaver.js"></script>
|
|
<script src="js/scanWeb.js"></script>
|
|
</body>
|
|
</html>
|