Skip to content

F
founder_vue
Commit 14f431ce by 张超军
Options

Merge branch 'dev_zwpt' of http://47.92.108.28/changchao/founder_vue into dev_zwpt

parents c5078df2 aa7cb576
Showing with 590 additions and 230 deletions
src/views/Editor/modules/imageEd.vue
<!--
* @Author: your name
* @Date: 2021-10-22 11:36:10
* @LastEditTime: 2021-12-13 11:46:08
* @LastEditTime: 2021-12-13 12:16:34
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\imageEd.vue
......@@ -11,62 +11,186 @@
<div class="imageEd">
<div class="imageEd_header">
<div class="center">
<el-tooltip class="item" effect="dark" content="撤销" :open-delay="500">
<el-tooltip
class="item"
effect="dark"
content="撤销"
:open-delay="500"
>
<dir v-if="isFace" class="disabled back">
<img class="disabled-img" src="@/assets/img/zcedit/back_disabled.png" alt="" />
<img
class="disabled-img"
src="@/assets/img/zcedit/back_disabled.png"
alt=""
/>
</dir>
<div v-else class="icon back disabled disabled2" id="btn-undo" @mousedown="mouseDownBack" @mouseup="mouseUpBack">
<img src="@/assets/img/zcedit/back.png" alt="" v-show="!back_active" />
<img src="@/assets/img/zcedit/back_a.png" alt="" v-show="back_active" />
<div
v-else
class="icon back disabled disabled2"
id="btn-undo"
@mousedown="mouseDownBack"
@mouseup="mouseUpBack"
>
<img
src="@/assets/img/zcedit/back.png"
alt=""
v-show="!back_active"
/>
<img
src="@/assets/img/zcedit/back_a.png"
alt=""
v-show="back_active"
/>
</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="恢复" :open-delay="500">
<el-tooltip
class="item"
effect="dark"
content="恢复"
:open-delay="500"
>
<dir v-if="isFace" class="disabled go">
<img class="disabled-img" src="@/assets/img/zcedit/go_disabled.png" alt="" />
<img
class="disabled-img"
src="@/assets/img/zcedit/go_disabled.png"
alt=""
/>
</dir>
<div v-else class="icon go disabled disabled2" id="btn-redo" @mousedown="mouseDownGo" @mouseup="mouseUpGo">
<img src="@/assets/img/zcedit/go.png" alt="" v-show="!go_active" />
<img src="@/assets/img/zcedit/go_a.png" alt="" v-show="go_active" />
<div
v-else
class="icon go disabled disabled2"
id="btn-redo"
@mousedown="mouseDownGo"
@mouseup="mouseUpGo"
>
<img
src="@/assets/img/zcedit/go.png"
alt=""
v-show="!go_active"
/>
<img
src="@/assets/img/zcedit/go_a.png"
alt=""
v-show="go_active"
/>
</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="移动" :open-delay="500">
<el-tooltip
class="item"
effect="dark"
content="移动"
:open-delay="500"
>
<dir v-if="isFace" class="disabled drag">
<img class="disabled-img" src="@/assets/img/zcedit/drag_disabled.png" alt="" />
<img
class="disabled-img"
src="@/assets/img/zcedit/drag_disabled.png"
alt=""
/>
</dir>
<div v-else class="icon drag" @click="hand">
<img v-if="!isHand" src="@/assets/img/zcedit/drag.png" alt="" />
<img v-else src="@/assets/img/zcedit/drag_a.png" alt="" />
</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="放大" :open-delay="500">
<el-tooltip
class="item"
effect="dark"
content="放大"
:open-delay="500"
>
<dir v-if="isFace" class="disabled enlarge">
<img class="disabled-img" src="@/assets/img/zcedit/enlarge_disabled.png" alt="" />
<img
class="disabled-img"
src="@/assets/img/zcedit/enlarge_disabled.png"
alt=""
/>
</dir>
<div v-else class="icon enlarge" @click="enlarge">
<img v-if="!isEnlarge" src="@/assets/img/zcedit/enlarge.png" alt="" />
<img
v-if="!isEnlarge"
src="@/assets/img/zcedit/enlarge.png"
alt=""
/>
<img v-else src="@/assets/img/zcedit/enlarge_a.png" alt="" />
</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="原尺寸显示" :open-delay="500" placement="top">
<el-tooltip
class="item"
effect="dark"
content="原尺寸显示"
:open-delay="500"
placement="top"
>
<dir v-if="isFace" class="disabled size">
<img class="disabled-img" src="@/assets/img/zcedit/size_disabled.png" alt="" />
<img
class="disabled-img"
src="@/assets/img/zcedit/size_disabled.png"
alt=""
/>
</dir>
<div v-else class="size_mix">
<div class="icon_size" @click.stop="sizeChange">
<img class="size" v-if="!isActive" src="@/assets/img/zcedit/size.png" alt="" />
<img class="size" v-else src="@/assets/img/zcedit/size_a.png" alt="" />
<img class="arrow" v-show="!isActive" src="@/assets/img/zcedit/arrow.png" alt="" />
<img class="arrow" v-show="isActive" src="@/assets/img/zcedit/arrow_a.png" alt="" />
<img
class="size"
v-if="!isActive"
src="@/assets/img/zcedit/size.png"
alt=""
/>
<img
class="size"
v-else
src="@/assets/img/zcedit/size_a.png"
alt=""
/>
<img
class="arrow"
v-show="!isActive"
src="@/assets/img/zcedit/arrow.png"
alt=""
/>
<img
class="arrow"
v-show="isActive"
src="@/assets/img/zcedit/arrow_a.png"
alt=""
/>
</div>
</div>
</el-tooltip>
<div class="rotate_mix" v-if="!isFace">
<el-tooltip class="item" effect="dark" content="旋转" :open-delay="500" placement="top">
<el-tooltip
class="item"
effect="dark"
content="旋转"
:open-delay="500"
placement="top"
>
<div class="icon_rotate" @click.stop="rotateChange">
<img class="rotate" v-if="!isActive_rotate" src="@/assets/img/zcedit/rotate.png" alt="" />
<img class="rotate" v-else src="@/assets/img/zcedit/rotate_a.png" alt="" />
<img class="arrow" v-if="!isActive_rotate" src="@/assets/img/zcedit/arrow.png" alt="" />
<img class="arrow" v-else src="@/assets/img/zcedit/arrow_a.png" alt="" />
<img
class="rotate"
v-if="!isActive_rotate"
src="@/assets/img/zcedit/rotate.png"
alt=""
/>
<img
class="rotate"
v-else
src="@/assets/img/zcedit/rotate_a.png"
alt=""
/>
<img
class="arrow"
v-if="!isActive_rotate"
src="@/assets/img/zcedit/arrow.png"
alt=""
/>
<img
class="arrow"
v-else
src="@/assets/img/zcedit/arrow_a.png"
alt=""
/>
</div>
</el-tooltip>
<div class="rotateOptions" v-show="isRotateOptions" @click.stop>
......@@ -80,19 +204,41 @@
<div class="rotate_content">
<div class="rotate_left" id="btn-rotate-clockwise">
<div class="rotate_icon">
<img v-if="!isLeftRotate" src="@/assets/img/zcedit/left_rotate_d.png" alt="" />
<img v-else src="@/assets/img/zcedit/left_rotate_a.png" alt="" />
<img
v-if="!isLeftRotate"
src="@/assets/img/zcedit/left_rotate_d.png"
alt=""
/>
<img
v-else
src="@/assets/img/zcedit/left_rotate_a.png"
alt=""
/>
</div>
<div class="num" :class="{ leftRotateActive: isLeftRotate }">
<div
class="num"
:class="{ leftRotateActive: isLeftRotate }"
>
30
</div>
</div>
<div class="rotate_right" id="btn-rotate-counter-clockwise">
<div class="rotate_icon">
<img v-if="!isRightRotate" src="@/assets/img/zcedit/left_rotate_d.png" alt="" />
<img v-else src="@/assets/img/zcedit/left_rotate_a.png" alt="" />
<img
v-if="!isRightRotate"
src="@/assets/img/zcedit/left_rotate_d.png"
alt=""
/>
<img
v-else
src="@/assets/img/zcedit/left_rotate_a.png"
alt=""
/>
</div>
<div class="num" :class="{ rightRotateActive: isRightRotate }">
<div
class="num"
:class="{ rightRotateActive: isRightRotate }"
>
-30
</div>
</div>
......@@ -100,15 +246,31 @@
<div class="flap_content">
<div class="flap_x" id="btn-flip-x">
<div class="flap_x_icon">
<img v-if="!isX" src="@/assets/img/zcedit/flap_x_d.png" alt="" />
<img v-else src="@/assets/img/zcedit/flap_x_a.png" alt="" />
<img
v-if="!isX"
src="@/assets/img/zcedit/flap_x_d.png"
alt=""
/>
<img
v-else
src="@/assets/img/zcedit/flap_x_a.png"
alt=""
/>
</div>
<div class="flap_txt" :class="{ xActive: isX }">X轴</div>
</div>
<div class="flap_y" id="btn-flip-y">
<div class="flap_y_icon">
<img v-if="!isY" src="@/assets/img/zcedit/flap_y_d.png" alt="" />
<img v-else src="@/assets/img/zcedit/flap_y_a.png" alt="" />
<img
v-if="!isY"
src="@/assets/img/zcedit/flap_y_d.png"
alt=""
/>
<img
v-else
src="@/assets/img/zcedit/flap_y_a.png"
alt=""
/>
</div>
<div class="flap_txt" :class="{ yActive: isY }">Y轴</div>
</div>
......@@ -117,11 +279,22 @@
<div class="rotate_bottom">
<div class="progress">
<!-- <input id="input-rotation-range" type="range" min="-360" :value="inputRotationRange" max="360" /> -->
<el-slider @click.stop id="input-rotation-range" :min="-360" :max="360" v-model.number="inputRotationRange"></el-slider>
<el-slider
@click.stop
id="input-rotation-range"
:min="-360"
:max="360"
v-model.number="inputRotationRange"
></el-slider>
</div>
<div class="desc">
<div class="qj">区间</div>
<input class="qj_v" type="text" @click.stop v-model.number="inputRotationRange" />
<input
class="qj_v"
type="text"
@click.stop
v-model.number="inputRotationRange"
/>
</div>
</div>
</div>
......@@ -141,42 +314,88 @@
<div class="item-name">适中</div>
</div>
</div>
<el-tooltip class="item" effect="dark" content="下载" :open-delay="500">
<el-tooltip
class="item"
effect="dark"
content="下载"
:open-delay="500"
>
<dir v-if="isFace" class="disabled download">
<img class="disabled-img" src="@/assets/img/zcedit/download_disabled.png" alt="" />
<img
class="disabled-img"
src="@/assets/img/zcedit/download_disabled.png"
alt=""
/>
</dir>
<div v-else class="icon download" id="btn-download">
<img src="@/assets/img/zcedit/download.png" alt="" />
</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="缩略图" :open-delay="500">
<div class="icon bzd" @click="onchangePreview" v-if="zwType == '掌纹'">
<el-tooltip
class="item"
effect="dark"
content="缩略图"
:open-delay="500"
>
<div
class="icon bzd"
@click="onchangePreview"
v-if="zwType == '掌纹'"
>
<img src="@/assets/img/zcedit/bzd.png" alt="" />
</div>
<div class="disabled" v-else>
<img class="disabled-img" src="@/assets/img/zcedit/slt_disabled.png" alt="" />
<img
class="disabled-img"
src="@/assets/img/zcedit/slt_disabled.png"
alt=""
/>
</div>
</el-tooltip>
</div>
</div>
<div class="imageEd_main">
<div v-if="!isFace" class="preview-source" v-show="isShowSourcePrivew">
<img id="preview-source-img" :src="'data:image/jpeg;base64,' + sourceImage" alt="" />
<img
id="preview-source-img"
:src="'data:image/jpeg;base64,' + sourceImage"
alt=""
/>
<div id="block_small" class="block_small" v-show="true"></div>
</div>
<div class="drawing">
<div v-if="!isFace" class="title">{{ fingerTitle }}</div>
<div class="body-container">
<div v-show="!isFace" class="tui-image-editor"></div>
<img id="sourceImage" style="display:none" :src="'data:image/jpeg;base64,' + sourceImage" alt="" />
<img
id="sourceImage"
style="display:none"
:src="'data:image/jpeg;base64,' + sourceImage"
alt=""
/>
<div v-if="isFace" class="face-content">
<div class="face-item" v-for="(item, i) in rxInfo" :key="i">
<div class="face-image">
<!-- 有图像 -->
<img @dblclick="faceDoubleChange(item)" v-if="item.image && item.code == 14" class="face-pic idCard" :src="'data:image/jpeg;base64,' + item.image" />
<img @dblclick="faceDoubleChange(item)" v-else-if="item.image && item.code != 14" class="face-pic" :src="'data:image/jpeg;base64,' + item.image" />
<img
@dblclick="faceDoubleChange(item)"
v-if="item.image && item.code == 14"
class="face-pic idCard"
:src="'data:image/jpeg;base64,' + item.image"
/>
<img
@dblclick="faceDoubleChange(item)"
v-else-if="item.image && item.code != 14"
class="face-pic"
:src="'data:image/jpeg;base64,' + item.image"
/>
<!-- 缺图像 -->
<img v-else class="face-absence" src="@/assets/img/TT/zwtp.png" alt="" />
<img
v-else
class="face-absence"
src="@/assets/img/TT/zwtp.png"
alt=""
/>
<span class="zwtx" v-show="item.image == null">暂无图像</span>
</div>
<div class="face-name">{{ item.name }}</div>
......@@ -219,24 +438,57 @@
</div>
<div class="options-line"></div>
<div class="options-btns">
<el-tooltip class="item" effect="dark" content="特征点" :open-delay="500">
<div class="tzd" :class="{ featuresActive: isHandTZD }" @click="tzdChange">
<el-tooltip
class="item"
effect="dark"
content="特征点"
:open-delay="500"
>
<div
class="tzd"
:class="{ featuresActive: isHandTZD }"
@click="tzdChange"
>
<img src="@/assets/img/zcedit/features1.svg" alt="" />
<div class="number">{{ tzdnumber }}</div>
</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="方向" :open-delay="500" style="display: none;">
<div class="bzd" :class="{ featuresActive: isdirection }" @click="directionChange">
<el-tooltip
class="item"
effect="dark"
content="方向"
:open-delay="500"
style="display: none;"
>
<div
class="bzd"
:class="{ featuresActive: isdirection }"
@click="directionChange"
>
<img src="@/assets/img/rybj/bzd.svg" alt="" />
</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="自动提取特征" :open-delay="500">
<el-tooltip
class="item"
effect="dark"
content="自动提取特征"
:open-delay="500"
>
<div class="dp" v-show="isAutoTzd" @mouseup="isAutoTzd = false">
<img src="@/assets/img/rybj/dp.svg" alt="" />
</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="自动提取特征" :open-delay="500">
<div class="dp-d" @mousedown="getAutoTzd(true)" v-show="!isAutoTzd">
<el-tooltip
class="item"
effect="dark"
content="自动提取特征"
:open-delay="500"
>
<div
class="dp-d"
@mousedown="getAutoTzd(true)"
v-show="!isAutoTzd"
>
<img src="@/assets/img/rybj/dp.svg" alt="" />
</div>
</el-tooltip>
......@@ -246,13 +498,33 @@
</div>
<div class="save">
<div class="save-types">选择保存类型：</div>
<div class="dqzwtz" :class="{ active: saveType === '当前指位特征' }" @click.stop="changeSaveType('当前指位特征')">
<el-tooltip class="item" effect="dark" content="保存当前指位特征" placement="top" :open-delay="500">
<div
class="dqzwtz"
:class="{ active: saveType === '当前指位特征' }"
@click.stop="changeSaveType('当前指位特征')"
>
<el-tooltip
class="item"
effect="dark"
content="保存当前指位特征"
placement="top"
:open-delay="500"
>
<img src="@/assets/img/rybj/dqzw.png" alt="" />
</el-tooltip>
</div>
<div class="qbzwtz" :class="{ active: saveType === '全部指位特征' }" @click.stop="changeSaveType('全部指位特征')">
<el-tooltip class="item" effect="dark" content="保存全部指位特征" placement="top" :open-delay="500">
<div
class="qbzwtz"
:class="{ active: saveType === '全部指位特征' }"
@click.stop="changeSaveType('全部指位特征')"
>
<el-tooltip
class="item"
effect="dark"
content="保存全部指位特征"
placement="top"
:open-delay="500"
>
<img src="@/assets/img/rybj/qbzw.png" alt="" />
</el-tooltip>
</div>
......@@ -265,28 +537,58 @@
<div class="options-bottom-title">图像调整</div>
<div class="options-bottom-btns">
<!-- <div class="btn" :class="{grayActive: isGrayActive}" @click="changeGray">灰度</div> -->
<div class="btn" :class="{ vintageActive: isVintageActive }" @click="changeVintage">
<div
class="btn"
:class="{ vintageActive: isVintageActive }"
@click="changeVintage"
>
棕褐色
</div>
<div class="disabled" :class="{ horseshoeMirrorActive: isHorseshoeMirrorActive }">
<div
class="disabled"
:class="{ horseshoeMirrorActive: isHorseshoeMirrorActive }"
>
马蹄镜
</div>
<div class="disabled" :class="{ equalizationActive: isEqualizationActive }">
<div
class="disabled"
:class="{ equalizationActive: isEqualizationActive }"
>
均衡化
</div>
<div class="btn" :class="{ sharpenActive: isSharpenActive }" @click="changeSharpen">
<div
class="btn"
:class="{ sharpenActive: isSharpenActive }"
@click="changeSharpen"
>
锐化
</div>
<div class="btn" :class="{ embossActive: isEmbossActive }" @click="changeEmboss">
<div
class="btn"
:class="{ embossActive: isEmbossActive }"
@click="changeEmboss"
>
浮雕
</div>
<div class="btn" :class="{ invertActive: isInvertActive }" @click="changeInvert">
<div
class="btn"
:class="{ invertActive: isInvertActive }"
@click="changeInvert"
>
反相
</div>
<div class="btn" :class="{ blendActive: isBlendActive }" @click="changeBlend">
<div
class="btn"
:class="{ blendActive: isBlendActive }"
@click="changeBlend"
>
差异化
</div>
<div class="btn" :class="{ multiplyActive: isMultiplyActive }" @click="changeMultiply">
<div
class="btn"
:class="{ multiplyActive: isMultiplyActive }"
@click="changeMultiply"
>
正片叠底
</div>
<!-- 去白弹框 -->
......@@ -294,8 +596,18 @@
<div class="title">去白</div>
<div class="content">
<!-- <input class="range-narrow" id="input-range-remove-white-distance" type="range" min="0" :value="inputRemoveWhiteRange" max="255" /> -->
<el-slider class="range-narrow" id="input-range-remove-white-distance" v-model="inputRemoveWhiteRange" :min="0" :max="255"></el-slider>
<input class="qb_v" type="text" v-model="inputRemoveWhiteRange" />
<el-slider
class="range-narrow"
id="input-range-remove-white-distance"
v-model="inputRemoveWhiteRange"
:min="0"
:max="255"
></el-slider>
<input
class="qb_v"
type="text"
v-model="inputRemoveWhiteRange"
/>
</div>
</div>
<!-- 正片叠底弹框 -->
......@@ -316,32 +628,74 @@
<div class="color-filter">
<div class="title">滤色器</div>
<div class="content">
<el-slider class="range-narrow" id="input-range-color-filter-value" v-model.number="inputColorFilterRange" :min="0" :max="255"></el-slider>
<input min="0" max="255" class="qb_v" type="text" v-model.number="inputColorFilterRange" />
<el-slider
class="range-narrow"
id="input-range-color-filter-value"
v-model.number="inputColorFilterRange"
:min="0"
:max="255"
></el-slider>
<input
min="0"
max="255"
class="qb_v"
type="text"
v-model.number="inputColorFilterRange"
/>
</div>
</div>
<!-- 亮度 -->
<div class="brightness">
<div class="title">亮度</div>
<div class="content">
<el-slider class="range-narrow" id="input-range-brightness-value" v-model.number="inputBrightnessRange" :min="-255" :max="255"></el-slider>
<input class="qb_v" type="text" v-model.number="inputBrightnessRange" />
<el-slider
class="range-narrow"
id="input-range-brightness-value"
v-model.number="inputBrightnessRange"
:min="-255"
:max="255"
></el-slider>
<input
class="qb_v"
type="text"
v-model.number="inputBrightnessRange"
/>
</div>
</div>
<!-- 对比度 -->
<div class="contrast-ratio">
<div class="title">对比度</div>
<div class="content">
<el-slider class="range-narrow" id="input-range-contrast-value" v-model.number="inputContrastRange" :min="-255" :max="255"></el-slider>
<input class="qb_v" type="text" v-model.number="inputContrastRange" />
<el-slider
class="range-narrow"
id="input-range-contrast-value"
v-model.number="inputContrastRange"
:min="-255"
:max="255"
></el-slider>
<input
class="qb_v"
type="text"
v-model.number="inputContrastRange"
/>
</div>
</div>
<!-- 去白 -->
<div class="brightness">
<div class="title">去白</div>
<div class="content">
<el-slider class="range-narrow" id="input-range-remove-white-distance" v-model.number="inputRemoveWhiteRange" :min="0" :max="255"></el-slider>
<input class="qb_v" type="text" v-model.number="inputRemoveWhiteRange" />
<el-slider
class="range-narrow"
id="input-range-remove-white-distance"
v-model.number="inputRemoveWhiteRange"
:min="0"
:max="255"
></el-slider>
<input
class="qb_v"
type="text"
v-model.number="inputRemoveWhiteRange"
/>
</div>
</div>
<div class="mask" v-if="isFace"></div>
......@@ -357,7 +711,7 @@ import MouseGesture from "./tzd_rotate.js";
import "@/icons/direction.svg";
// import RangeSlider from './RangeSlider';
export default {
data () {
data() {
return {
// 人像信息
rxInfo: [],
......@@ -630,7 +984,7 @@ export default {
isFace: (state) => state.ryzwbj.isFace,
}),
},
created () {
created() {
let w1 = 1920;
let w2 = window.innerWidth;
this.canvasWidth = (this.canvasWidth * w2) / w1;
......@@ -639,7 +993,7 @@ export default {
// 获取barcode，seq
this.barcode = this.$route.params.barcode;
},
mounted () {
mounted() {
//console.log(this.$route.name);
let self = this;
var supportingFileAPI = !!(
......@@ -693,7 +1047,7 @@ export default {
// imageEditor.loadImageFromURL("img/xxx.jpg", "SampleImage").then(function (sizeValue) {
imageEditor
.loadImageFromURL("img/xxx.jpg", "SampleImage")
.then(function (sizeValue) {
.then(function(sizeValue) {
//console.log(sizeValue);
imageEditor.clearUndoStack();
});
......@@ -734,7 +1088,7 @@ export default {
});
this.blendColorpicker = blendColorpicker;
function resizeEditor () {
function resizeEditor() {
var $editor = $(".tui-image-editor");
var $container = $(".tui-image-editor-canvas-container");
var height = parseFloat($container.css("max-height"));
......@@ -742,7 +1096,7 @@ export default {
$editor.height(height);
}
function getBrushSettings () {
function getBrushSettings() {
var brushWidth = parseInt($("#normal")[0].dataset.width, 10);
var brushColor = brushColorpicker.getColor();
......@@ -753,7 +1107,7 @@ export default {
}
// HEX to RGBA
function hexToRGBa (hex, alpha) {
function hexToRGBa(hex, alpha) {
var r = parseInt(hex.slice(1, 3), 16);
var g = parseInt(hex.slice(3, 5), 16);
var b = parseInt(hex.slice(5, 7), 16);
......@@ -762,11 +1116,11 @@ export default {
return "rgba(" + r + "," + g + "," + b + "," + a + ")";
}
function base64ToBlob (data) {
function base64ToBlob(data) {
var mimeString = "";
var raw, uInt8Array, i, rawLength;
raw = data.replace(rImageType, function (header, imageType) {
raw = data.replace(rImageType, function(header, imageType) {
mimeString = imageType;
return "";
......@@ -783,9 +1137,9 @@ export default {
return new Blob([uInt8Array], { type: mimeString });
}
function applyOrRemoveFilter (applying, type, options) {
function applyOrRemoveFilter(applying, type, options) {
if (applying) {
imageEditor.applyFilter(type, options).then(function (result) {
imageEditor.applyFilter(type, options).then(function(result) {
// //console.log(result);
});
} else {
......@@ -795,7 +1149,7 @@ export default {
// Attach image editor custom events
imageEditor.on({
objectAdded: function (objectProps) {
objectAdded: function(objectProps) {
//console.info(objectProps);
if (objectProps.type == "line") {
self.lines.push(objectProps);
......@@ -803,7 +1157,7 @@ export default {
}
// self.historys.push(objectProps.type)
},
undoStackChanged: function (length) {
undoStackChanged: function(length) {
if (length) {
$btnUndo.removeClass("disabled");
} else {
......@@ -811,7 +1165,7 @@ export default {
}
resizeEditor();
},
redoStackChanged: function (length) {
redoStackChanged: function(length) {
if (length) {
$btnRedo.removeClass("disabled");
} else {
......@@ -819,28 +1173,28 @@ export default {
}
resizeEditor();
},
objectScaled: function (obj) {
objectScaled: function(obj) {
//console.log(obj);
if (obj.type === "text") {
$inputFontSizeRange.val(obj.fontSize);
}
},
addText: function (pos) {
addText: function(pos) {
imageEditor
.addText("Double Click", {
position: pos.originPosition,
})
.then(function (objectProps) {
.then(function(objectProps) {
//console.log(objectProps);
});
},
objectActivated: function (obj) {
objectActivated: function(obj) {
//console.log(obj);
// 选择特征点
if (obj.type == "line") {
$(document)
.unbind("keydown")
.keydown(function (event) {
.keydown(function(event) {
if (event.keyCode == 46) {
// 从数组中删除
let lineIndex = self.lines.findIndex((item) => {
......@@ -861,7 +1215,7 @@ export default {
self.curveArr.push(obj);
}
},
mousedown: function (event, originPointer) {
mousedown: function(event, originPointer) {
//console.log(event);
//console.log(originPointer);
if (
......@@ -877,35 +1231,35 @@ export default {
});
// 撤回
$btnUndo.on("click", function (e) {
$btnUndo.on("click", function(e) {
e.stopPropagation();
self.initStatus();
//console.log("撤销");
if (!$(this).hasClass("disabled")) {
imageEditor.discardSelection();
imageEditor.undo();
self.resetTzdDrawing()
self.resetTzdDrawing();
}
});
// 恢复
$btnRedo.on("click", function (e) {
$btnRedo.on("click", function(e) {
e.stopPropagation();
//console.log("恢复");
if (!$(this).hasClass("disabled")) {
imageEditor.discardSelection();
imageEditor.redo();
self.resetTzdDrawing()
self.resetTzdDrawing();
}
});
// 标记
imageEditor.on("mousedown", function (e, originPointer) {
imageEditor.on("mousedown", function(e, originPointer) {
e.stopPropagation();
// 放大
if (self.isEnlarge) {
self.mouseEnlarge = true;
$(".tui-image-editor").mousemove(function (e) {
$(".tui-image-editor").mousemove(function(e) {
if (self.mouseEnlarge) {
// 放大
if (e.offsetY + 31 < originPointer.y) {
......@@ -916,7 +1270,6 @@ export default {
self.zoomImage(self.zoomLevel);
$(".tzdDom").css("z-index", `99999`);
} else {
// 缩小
self.zoomLevel = self.zoomLevel - 0.01;
......@@ -937,7 +1290,7 @@ export default {
// });
// 下载
$btnDownload.on("click", function (e) {
$btnDownload.on("click", function(e) {
e.stopPropagation();
var imageName = "源数据指纹";
var dataURL = $("#sourceImage").attr("src");
......@@ -960,30 +1313,30 @@ export default {
}
});
// 沿X轴翻转
$btnFlipX.on("click", function (e) {
$btnFlipX.on("click", function(e) {
e.stopPropagation();
//console.log(111);
self.isX = true;
self.isY = false;
self.isReset = false;
imageEditor.flipX().then(function (status) {
imageEditor.flipX().then(function(status) {
self.changeTzdDrawing();
});
});
// 沿Y轴翻转
$btnFlipY.on("click", function (e) {
$btnFlipY.on("click", function(e) {
e.stopPropagation();
self.isX = false;
self.isY = true;
self.isReset = false;
imageEditor.flipY().then(function (status) {
imageEditor.flipY().then(function(status) {
self.changeTzdDrawing();
});
});
// 重置
$btnResetFlip.on("click", function (e) {
$btnResetFlip.on("click", function(e) {
e.stopPropagation();
self.isX = false;
self.isY = false;
......@@ -997,14 +1350,11 @@ export default {
imageEditor.rotate(-parseInt(self.startPlace));
imageEditor.resetZoom();
self.startPlace = 0;
self.resetTzdDrawing()
self.resetTzdDrawing();
}, 200);
//重置位置变量
self.zoomLevel = 1;
imageEditor.resetFlip().then(function (status) {
});
imageEditor.resetFlip().then(function(status) {});
// 移动图片
// imageEditor._graphics.setImageProperties({
......@@ -1016,7 +1366,7 @@ export default {
});
// 向左旋转30°
$btnRotateClockwise.on("click", function (e) {
$btnRotateClockwise.on("click", function(e) {
e.stopPropagation();
self.startPlace += 30;
self.isLeftRotate = true;
......@@ -1025,7 +1375,7 @@ export default {
self.historys.push("旋转");
});
// 向右旋转30°
$btnRotateCounterClockWise.on("click", function (e) {
$btnRotateCounterClockWise.on("click", function(e) {
e.stopPropagation();
self.startPlace -= 30;
self.isLeftRotate = false;
......@@ -1035,38 +1385,37 @@ export default {
self.rotateImage(-30, true);
});
// 滑动旋转事件
$inputRotationRange.on("mousedown", function (e) {
$inputRotationRange.on("mousedown", function(e) {
e.stopPropagation();
var changeAngle = function () {
var changeAngle = function() {
self.startPlace = self.inputRotationRange;
// 每次旋转时，位置都会改变，需要重新定位
self.rotateImage(self.inputRotationRange);
};
$(document).on("mousemove", changeAngle);
$(document).on("mouseup", function stopChangingAngle () {
$(document).on("mouseup", function stopChangingAngle() {
$(document).off("mousemove", changeAngle);
$(document).off("mouseup", stopChangingAngle);
});
});
// 滑动旋转事件
$inputRotationRange.on("change", function (e) {
$inputRotationRange.on("change", function(e) {
e.stopPropagation();
self.startPlace = self.inputRotationRange;
self.historys.push("旋转");
// 每次旋转时，位置都会改变，需要重新定位
self.rotateImage(self.inputRotationRange);
});
// 划线事件
$btnDrawLine.on("click", function (e) {
$btnDrawLine.on("click", function(e) {
e.stopPropagation();
imageEditor.stopDrawingMode();
$selectLine.eq(0).change();
});
// 线条模式
$selectLine.on("click", function (e) {
$selectLine.on("click", function(e) {
e.stopPropagation();
var mode = $(this)[0].dataset.val;
self.mode = mode;
......@@ -1080,7 +1429,7 @@ export default {
}
});
// 线条模式
$selectLine.on("change", function (e) {
$selectLine.on("change", function(e) {
e.stopPropagation();
var mode = $(this)[0].dataset.val;
var settings = getBrushSettings();
......@@ -1098,7 +1447,7 @@ export default {
});
// 滑动条去除白色
$inputRangeRemoveWhiteDistance.on("change", function () {
$inputRangeRemoveWhiteDistance.on("change", function() {
self.inputRemoveWhiteRange = Number(this.value);
applyOrRemoveFilter(true, "removeColor", {
distance: parseInt(this.value, 10) / 255,
......@@ -1106,7 +1455,7 @@ export default {
});
// 滑动条滤色
$inputRangeColorFilterValue.on("change", function (value) {
$inputRangeColorFilterValue.on("change", function(value) {
//console.log(value);
self.inputColorFilterRange = Number(this.value);
applyOrRemoveFilter(true, "removeColor", {
......@@ -1115,13 +1464,13 @@ export default {
});
// 正片叠底
multiplyColorpicker.on("selectColor", function (e) {
multiplyColorpicker.on("selectColor", function(e) {
applyOrRemoveFilter(true, "blendColor", {
color: e.color,
});
});
$inputCheckBlend.on("change", function () {
$inputCheckBlend.on("change", function() {
applyOrRemoveFilter(this.checked, "blendColor", {
mode: $selectBlendType.val(),
color: blendColorpicker.getColor(),
......@@ -1129,14 +1478,14 @@ export default {
});
// 差异化
blendColorpicker.on("selectColor", function (e) {
blendColorpicker.on("selectColor", function(e) {
applyOrRemoveFilter(true, "blendColor", {
color: e.color,
});
});
// 亮度
$inputRangeBrightnessValue.on("change", function () {
$inputRangeBrightnessValue.on("change", function() {
self.inputBrightnessRange = this.value;
applyOrRemoveFilter(true, "brightness", {
brightness: parseInt(this.value, 10) / 255,
......@@ -1144,7 +1493,7 @@ export default {
});
// 对比度
$inputRangeContrastValue.on("change", function () {
$inputRangeContrastValue.on("change", function() {
self.inputContrastRange = this.value;
applyOrRemoveFilter(true, "contrast", {
contrast: this.value / 255,
......@@ -1163,7 +1512,7 @@ export default {
"data:image/jpeg;base64," + sourceImage,
"SampleImage"
)
.then(function (sizeValue) {
.then(function(sizeValue) {
// 更新工具栏的优先级
setTimeout(() => {
// TODO
......@@ -1273,12 +1622,12 @@ export default {
self.clearALL()
});
$(document).keydown(function (event) {
$(document).keydown(function(event) {
if (event.keyCode == 32) {
self.isHandSpace = true;
}
});
$(document).keyup(function (event) {
$(document).keyup(function(event) {
if (event.keyCode == 32) {
self.isHandSpace = false;
}
......@@ -1288,14 +1637,14 @@ export default {
var originPointer = {};
document
.querySelector(".tzdDrawing")
.addEventListener("mousedown", function (e) {
.addEventListener("mousedown", function(e) {
// 特征点--开启
ins = new MouseGesture({ wise: true });
originPointer = {
x: e.clientX,
y: e.clientY,
left: self.imageEditor._graphics.getCanvasImage().left,
top: self.imageEditor._graphics.getCanvasImage().top
top: self.imageEditor._graphics.getCanvasImage().top,
};
// 开启拖拽
if (self.isHand || self.isHandSpace) {
......@@ -1327,7 +1676,7 @@ export default {
id: self.tzdId,
x: e.pageX - $(".tzdDrawing").offset().left - 4,
y: e.pageY - $(".tzdDrawing").offset().top - 4,
angle: 0
angle: 0,
});
// self.tzdnumber++;
$(
......@@ -1482,13 +1831,13 @@ export default {
}
});
// 去掉鼠标默认事件
$(".tzdDrawing").bind("contextmenu", function (e) {
$(".tzdDrawing").bind("contextmenu", function(e) {
return false;
});
var obj = {};
document
.querySelector(".tzdDrawing")
.addEventListener("mousemove", function (e) {
.addEventListener("mousemove", function(e) {
// 开始拖拽
if (self.startHand) {
// 计算点的坐标
......@@ -1496,7 +1845,7 @@ export default {
let y1 = originPointer.y;
let x2 = e.clientX;
let y2 = e.clientY;
let canvasImage = imageEditor._graphics.getCanvasImage()
let canvasImage = imageEditor._graphics.getCanvasImage();
// 移动图片
const offsetx = canvasImage.getCenterPoint().x - 320;
......@@ -1507,7 +1856,7 @@ export default {
const topNew =
originPointer.top +
((y2 - y1) * self.newHeight) / self.canvasHeight / self.zoomLevel;
console.log("当前移动：", x2 - x1, y2 - y1)
console.log("当前移动：", x2 - x1, y2 - y1);
imageEditor._graphics.setImageProperties(
{
left: leftNew,
......@@ -1629,7 +1978,7 @@ export default {
});
document
.querySelector(".tzdDrawing")
.addEventListener("mouseup", function (e) {
.addEventListener("mouseup", function(e) {
let canvasImage = imageEditor._graphics.getCanvasImage();
self.tzdDrawingLeft = canvasImage.left;
......@@ -1698,7 +2047,7 @@ export default {
var direction_flag = false;
var origin_direction_x = 0;
var origin_direction_y = 0;
document.body.addEventListener("mousedown", function (e) {
document.body.addEventListener("mousedown", function(e) {
if (self.isdirection) {
// 动态计算坐标的原始位置
let o_x = 1135;
......@@ -1712,7 +2061,7 @@ export default {
origin_direction_y = e.clientY - o_y;
}
});
document.body.addEventListener("mousemove", function (e) {
document.body.addEventListener("mousemove", function(e) {
if (self.isdirection) {
if (direction_flag) {
// 动态计算坐标的原始位置
......@@ -1752,7 +2101,7 @@ export default {
}
}
});
document.body.addEventListener("mouseup", function (e) {
document.body.addEventListener("mouseup", function(e) {
if (self.isdirection) {
self.angle = angle;
self.preangle = angle;
......@@ -1772,7 +2121,7 @@ export default {
/**
* 监听鼠标点击事件，去掉下拉框
*/
document.addEventListener("click", function (e) {
document.addEventListener("click", function(e) {
e.stopPropagation();
//console.log('documentElement');
// 原尺寸显示下拉框
......@@ -1807,7 +2156,7 @@ export default {
/**
* 清除所有
*/
clearALL () {
clearALL() {
let self = this;
self.tzdnumber = 0;
this.$store.commit("zwbj/setTzdall", null);
......@@ -1825,7 +2174,7 @@ export default {
/**
* 人像双击事件
*/
faceDoubleChange (face) {
faceDoubleChange(face) {
this.$bus.emit("isBlur", true);
this.enLargeFace = true;
this.$bus.emit("setRxInfoEnlarge", face);
......@@ -1834,28 +2183,28 @@ export default {
/**
* 恢复按钮按下事件
*/
mouseDownGo () {
mouseDownGo() {
this.go_active = true;
this.initStatus();
},
/**
* 恢复按钮抬起事件
*/
mouseUpGo () {
mouseUpGo() {
this.go_active = false;
this.initStatus();
},
/**
* 撤销按钮按下事件
*/
mouseDownBack () {
mouseDownBack() {
this.back_active = true;
this.initStatus();
},
/**
* 撤销按钮抬起事件
*/
mouseUpBack () {
mouseUpBack() {
this.back_active = false;
this.initStatus();
},
......@@ -1864,7 +2213,7 @@ export default {
* @param {*}
* @return {*}
*/
async getAutoTzd (flag) {
async getAutoTzd(flag) {
this.isHandTZD = false;
this.isdirection = false;
let self = this;
......@@ -1891,7 +2240,11 @@ export default {
self.autoTzdArr = res.data.ret.fpt5TraitMinutiaSet.minutia || [];
console.log(self.autoTzdArr);
self.autoTzdArr.forEach((item, index) => {
self.$set(self.autoTzdArr[index], "id", "auto_tzdDom" + self.tzdId);
self.$set(
self.autoTzdArr[index],
"id",
"auto_tzdDom" + self.tzdId
);
$(
`<div id="auto_tzdDom${self.tzdId}" class="auto_tzdDom"><div class="head"></div><div class="direction"></div></div>`
).appendTo(".tzdDrawing");
......@@ -2072,7 +2425,7 @@ export default {
}
},
getDistance (origin, target) {
getDistance(origin, target) {
let originX = origin.x;
let originY = origin.y;
let targetX = target.x;
......@@ -2086,7 +2439,7 @@ export default {
* @param {*}
* @return {*}
*/
rotateChange () {
rotateChange() {
this.isHandTZD = false;
this.isdirection = false;
$(".icon_line").css("background", "rgba(5, 95, 231, 0.05)");
......@@ -2249,7 +2602,7 @@ export default {
* @param {*}
* @return {*}
*/
async directionChange () {
async directionChange() {
this.isdirection = !this.isdirection;
},
/**
......@@ -2257,7 +2610,7 @@ export default {
* @param {*}
* @return {*}
*/
tzdChange () {
tzdChange() {
let self = this;
this.isHandTZD = !this.isHandTZD;
if (this.isHandTZD) {
......@@ -2283,7 +2636,7 @@ export default {
* @param {*}
* @return {*}
*/
ModerateChange (type) {
ModerateChange(type) {
this.isHandTZD = false;
this.isdirection = false;
this.issize = false;
......@@ -2317,7 +2670,7 @@ export default {
* @param {*}
* @return {*}
*/
OriginalChange (type) {
OriginalChange(type) {
this.isHandTZD = false;
this.isdirection = false;
let self = this;
......@@ -2338,7 +2691,7 @@ export default {
self.tzdDrawing_left = 0;
self.tzdDrawing_top = 0;
self.zoomLevel = 1;
self.imageEditor.resetFlip().then(function (status) {
self.imageEditor.resetFlip().then(function(status) {
//console.log("flipX: ", status.flipX);
//console.log("flipY: ", status.flipY);
//console.log("angle: ", status.angle);
......@@ -2377,7 +2730,7 @@ export default {
* @param {*}
* @return {*}
*/
cancelPic () {
cancelPic() {
this.isActive_clear = false;
this.isShowClearDialog = false;
},
......@@ -2386,7 +2739,7 @@ export default {
* @param {*}
* @return {*}
*/
delPic () {
delPic() {
let self = this;
this.isHandTZD = false;
this.isdirection = false;
......@@ -2417,7 +2770,7 @@ export default {
* @param {*}
* @return {*}
*/
clearChange () {
clearChange() {
this.isActive_clear = !this.isActive_clear;
if (this.isActive_clear) {
this.isShowClearDialog = true;
......@@ -2430,7 +2783,7 @@ export default {
* @param {*}
* @return {*}
*/
changeMultiply () {
changeMultiply() {
this.isHandTZD = false;
this.isdirection = false;
// 是否展示旋转的下拉框
......@@ -2467,7 +2820,7 @@ export default {
.applyFilter("blendColor", {
color: self.multiplyColorpicker.getColor(),
})
.then(function (result) {
.then(function(result) {
// //console.log(result);
});
self.historys.push("正片叠底");
......@@ -2483,7 +2836,7 @@ export default {
* @param {*}
* @return {*}
*/
changeRemoveWhite () {
changeRemoveWhite() {
this.isHandTZD = false;
this.isdirection = false;
// 是否展示旋转的下拉框
......@@ -2522,7 +2875,7 @@ export default {
useAlpha: false,
distance: parseInt(self.inputRemoveWhiteRange, 10) / 255,
})
.then(function (result) {
.then(function(result) {
// //console.log(result);
});
self.historys.push("去白");
......@@ -2538,7 +2891,7 @@ export default {
* @param {*}
* @return {*}
*/
changeBlend () {
changeBlend() {
this.isHandTZD = false;
this.isdirection = false;
// 是否展示旋转的下拉框
......@@ -2576,7 +2929,7 @@ export default {
mode: "diff",
color: self.blendColorpicker.getColor(),
})
.then(function (result) {
.then(function(result) {
// //console.log(result);
});
self.historys.push("差异化");
......@@ -2592,7 +2945,7 @@ export default {
* @param {*}
* @return {*}
*/
changeInvert () {
changeInvert() {
this.isHandTZD = false;
this.isdirection = false;
// 是否展示旋转的下拉框
......@@ -2624,7 +2977,7 @@ export default {
let self = this;
this.isInvertActive = !this.isInvertActive;
if (this.isInvertActive) {
this.imageEditor.applyFilter("Invert", null).then(function (result) {
this.imageEditor.applyFilter("Invert", null).then(function(result) {
// //console.log(result);
});
self.historys.push("反相");
......@@ -2639,7 +2992,7 @@ export default {
* @param {*}
* @return {*}
*/
changeEmboss () {
changeEmboss() {
this.isHandTZD = false;
this.isdirection = false;
// 是否展示旋转的下拉框
......@@ -2671,7 +3024,7 @@ export default {
let self = this;
this.isEmbossActive = !this.isEmbossActive;
if (this.isEmbossActive) {
this.imageEditor.applyFilter("Emboss", null).then(function (result) {
this.imageEditor.applyFilter("Emboss", null).then(function(result) {
// //console.log(result);
});
self.historys.push("浮雕");
......@@ -2686,7 +3039,7 @@ export default {
* @param {*}
* @return {*}
*/
changeSharpen () {
changeSharpen() {
this.isHandTZD = false;
this.isdirection = false;
// 是否展示旋转的下拉框
......@@ -2718,7 +3071,7 @@ export default {
let self = this;
this.isSharpenActive = !this.isSharpenActive;
if (this.isSharpenActive) {
this.imageEditor.applyFilter("Sharpen", null).then(function (result) {
this.imageEditor.applyFilter("Sharpen", null).then(function(result) {
// //console.log(result);
});
} else {
......@@ -2732,7 +3085,7 @@ export default {
* @param {*}
* @return {*}
*/
changeEqualization () {
changeEqualization() {
this.isHandTZD = false;
this.isdirection = false;
// 是否展示旋转的下拉框
......@@ -2768,7 +3121,7 @@ export default {
* @param {*}
* @return {*}
*/
changeHorseshoeMirror () {
changeHorseshoeMirror() {
this.isHandTZD = false;
this.isdirection = false;
// 是否展示旋转的下拉框
......@@ -2811,7 +3164,7 @@ export default {
* @param {*}
* @return {*}
*/
changeVintage () {
changeVintage() {
this.isHandTZD = false;
this.isdirection = false;
// 是否展示旋转的下拉框
......@@ -2843,7 +3196,7 @@ export default {
let self = this;
this.isVintageActive = !this.isVintageActive;
if (this.isVintageActive) {
this.imageEditor.applyFilter("vintage", null).then(function (result) {
this.imageEditor.applyFilter("vintage", null).then(function(result) {
// //console.log(result);
});
self.historys.push("棕褐色");
......@@ -2858,7 +3211,7 @@ export default {
* @param {*}
* @return {*}
*/
changeGray () {
changeGray() {
this.isHandTZD = false;
this.isdirection = false;
// 是否展示旋转的下拉框
......@@ -2890,7 +3243,7 @@ export default {
let self = this;
this.isGrayActive = !this.isGrayActive;
if (this.isGrayActive) {
this.imageEditor.applyFilter("Grayscale", null).then(function (result) {
this.imageEditor.applyFilter("Grayscale", null).then(function(result) {
// //console.log(result);
});
self.historys.push("灰度");
......@@ -2905,7 +3258,7 @@ export default {
* @param {*}
* @return {*}
*/
goSave () {
goSave() {
this.isHandTZD = false;
this.isdirection = false;
let self = this;
......@@ -3153,7 +3506,7 @@ export default {
* @param {*} saveType
* @return {*}
*/
changeSaveType (saveType) {
changeSaveType(saveType) {
this.isHandTZD = false;
this.isdirection = false;
this.saveType = saveType;
......@@ -3164,7 +3517,7 @@ export default {
* @param {*}
* @return {*}
*/
saveTypeOptionsChange () {
saveTypeOptionsChange() {
this.isHandTZD = false;
this.isdirection = false;
this.isShowSaveTypeOptions = !this.isShowSaveTypeOptions;
......@@ -3174,7 +3527,7 @@ export default {
* @param {*}
* @return {*}
*/
changeyxhz () {
changeyxhz() {
this.isHandTZD = false;
this.isdirection = false;
this.iszyhz = false;
......@@ -3185,7 +3538,7 @@ export default {
* @param {*}
* @return {*}
*/
changezyhz () {
changezyhz() {
this.isHandTZD = false;
this.isdirection = false;
this.iszyhz = true;
......@@ -3196,7 +3549,7 @@ export default {
* @param {*}
* @return {*}
*/
zyhzOptionsChange () {
zyhzOptionsChange() {
this.isHandTZD = false;
this.isdirection = false;
this.isShowzyhzOptions = !this.isShowzyhzOptions;
......@@ -3206,7 +3559,7 @@ export default {
* @param {*}
* @return {*}
*/
enlarge () {
enlarge() {
console.log(this.imageEditor._graphics.getCanvasImage());
this.isHandTZD = false;
this.isdirection = false;
......@@ -3368,7 +3721,7 @@ export default {
* @param {*}
* @return {*}
*/
sizeChange () {
sizeChange() {
this.isHandTZD = false;
this.isdirection = false;
$(".icon_line").css("background", "rgba(5, 95, 231, 0.05)");
......@@ -3549,7 +3902,7 @@ export default {
* @param {*}
* @return {*}
*/
onchangePreview () {
onchangePreview() {
let self = this;
this.isShowSourcePrivew = !this.isShowSourcePrivew;
if (this.isShowSourcePrivew) {
......@@ -3580,9 +3933,11 @@ export default {
.css("height")
.substring(0, $(".preview-source").css("height").length - 2)
);
// 缩略图样式和尺寸
self.changeTzdDrawing()
}, 200);
function dragable (id) {
function dragable(id) {
var d = document,
o = d.getElementById(id),
s = o.style,
......@@ -3596,7 +3951,7 @@ export default {
y = e.clientY - o.offsetTop;
self.x = x;
self.y = y;
o[p] = function (e) {
o[p] = function(e) {
e = e || event;
s.left = e.clientX - self.x + "px";
s.top = e.clientY - self.y + "px";
......@@ -3652,9 +4007,8 @@ export default {
);
self.changeTzdDrawing(true, true);
// LMM↑↑↑↑↑↑↑↑↑↑↑↑
};
o.onmouseup = function (e) {
o.onmouseup = function(e) {
if (e.which === 1) {
o[p] = null;
}
......@@ -3669,7 +4023,7 @@ export default {
* @param {*}
* @return {*}
*/
hand () {
hand() {
this.isHandTZD = false;
this.isdirection = false;
let self = this;
......@@ -3826,7 +4180,7 @@ export default {
* @param {*}
* @return {*}
*/
initStatus () {
initStatus() {
this.isHandTZD = false;
this.isdirection = false;
$(".icon_line").css("background", "rgba(5, 95, 231, 0.05)");
......@@ -3978,7 +4332,7 @@ export default {
/**
* 判断是否可以跳转路由
*/
judgeJumpRoute () {
judgeJumpRoute() {
let isOptionsArr = [];
let sessionKeys = Object.keys(sessionStorage);
for (let index = 0; index < sessionKeys.length; index++) {
......@@ -4033,7 +4387,7 @@ export default {
return;
}
},
btnChange () {
btnChange() {
let isOptionsArr = [];
let sessionKeys = Object.keys(sessionStorage);
for (let index = 0; index < sessionKeys.length; index++) {
......@@ -4051,7 +4405,7 @@ export default {
/**
* 对特征点图层进行更新
*/
changeTzdDrawing (isPingyi, isNotRefreshSourcePrivew) {
changeTzdDrawing(isPingyi, isNotRefreshSourcePrivew) {
let canvasImage = this.imageEditor._graphics.getCanvasImage();
// 当前图像中心点
var centerP = canvasImage.getCenterPoint();
......@@ -4082,8 +4436,8 @@ export default {
)}px) scale(${zoom})`
);
// 缩略图
if (this.isShowSourcePrivew) {
// if (this.isShowSourcePrivew&&!isNotRefreshSourcePrivew) {
// if (this.isShowSourcePrivew) {
if (this.isShowSourcePrivew && !isNotRefreshSourcePrivew) {
// 底图变换
$("#preview-source-img").css(
"transform",
......@@ -4093,16 +4447,22 @@ export default {
$(".preview-source").width() / zoom,
$(".preview-source").height() / zoom,
];
const [xlTop, xlLeft] = [
$(".preview-source").height() / 2 - xlHeight / 2 -
(offsetY / this.canvasHeight) * $(".preview-source").height(),
$(".preview-source").width() / 2 - xlWidth / 2 -
(offsetX / this.canvasWidth) * $(".preview-source").width(),
];
// 更改小蓝框大小和位置
// 更改小蓝框大小
$(".block_small").css("width", `${xlWidth}px`);
$(".block_small").css("height", `${xlHeight}px`);
// 更改小蓝框位置
const [xlTop, xlLeft] = [
// $(".preview-source").height() / 2 - xlHeight / 2 -
$(".preview-source").height() / 2 -
$(".block_small").height() / 2 -
(offsetY / canvasImage.height) * $(".preview-source").height(),
// $(".preview-source").width() / 2 - xlWidth / 2 -
$(".preview-source").width() / 2 -
$(".block_small").width() / 2 -
(offsetX / canvasImage.width) * $(".preview-source").width(),
];
$(".block_small").css("left", `${xlLeft}px`);
$(".block_small").css("top", `${xlTop}px`);
}
......@@ -4110,14 +4470,14 @@ export default {
/**
* 图形归正
*/
resetTzdDrawing () {
resetTzdDrawing() {
this.handDataX = 0;
this.handDataY = 0;
this.zoomLevel = 1;
this.changeTzdDrawing();
},
// 旋转图片
rotateImage (deg, isAdd) {
rotateImage(deg, isAdd) {
let canvasImage = this.imageEditor._graphics.getCanvasImage();
let centerP = canvasImage.getCenterPoint();
// 判断是否移动过
......@@ -4152,7 +4512,7 @@ export default {
);
},
// 缩放图片
zoomImage (zoom) {
zoomImage(zoom) {
let canvasImage = this.imageEditor._graphics.getCanvasImage();
let centerP = canvasImage.getCenterPoint();
// 判断是否移动过
......@@ -4197,7 +4557,7 @@ export default {
watch: {
// 监听特征点的数量
tzdnumber: {
handler: function (newValue, oldValue) {
handler: function(newValue, oldValue) {
if (this.zwType == "指纹") {
// 指纹
if (newValue >= 240) {
......@@ -4216,12 +4576,12 @@ export default {
},
immediate: true,
},
isActive (val) {
isActive(val) {
if (val == false) {
this.isShowsizeOptions = false;
}
},
inputRotationRange (newValue, oldValue) {
inputRotationRange(newValue, oldValue) {
let self = this;
let deg = newValue - this.startPlace;
if (!deg) deg = 0;
......@@ -4232,54 +4592,54 @@ export default {
self.rotateImage(newValue);
// self.changeTzdDrawing();
},
inputRemoveWhiteRange (newValue, oldValue) {
inputRemoveWhiteRange(newValue, oldValue) {
this.imageEditor
.applyFilter("removeColor", {
distance: parseInt(newValue, 10) / 255,
})
.then(function (result) {
.then(function(result) {
// //console.log(result);
});
},
// 对比度
inputContrastRange (newValue, oldValue) {
inputContrastRange(newValue, oldValue) {
this.imageEditor
.applyFilter("Contrast", {
contrast: parseInt(newValue, 10) / 255,
})
.then(function (result) {
.then(function(result) {
// //console.log(result);
});
},
inputColorFilterRange (newValue, oldValue) {
inputColorFilterRange(newValue, oldValue) {
//console.log(newValue);
this.imageEditor
.applyFilter("removeColor", {
distance: parseInt(newValue, 10) / 255,
})
.then(function (result) {
.then(function(result) {
// //console.log(result);
});
},
inputBrightnessRange (newValue, oldValue) {
inputBrightnessRange(newValue, oldValue) {
this.imageEditor
.applyFilter("brightness", {
brightness: parseInt(newValue, 10) / 255,
})
.then(function (result) {
.then(function(result) {
// //console.log(result);
});
},
isEnlarge (newValue, oldValue) {
isEnlarge(newValue, oldValue) {
if (newValue) {
} else {
$(".tui-image-editor").unbind("mousemove", function (e) {
$(".tui-image-editor").unbind("mousemove", function(e) {
//console.log(111);
});
}
},
// 是否显示特征
isTZ (newValue, oldValue) {
isTZ(newValue, oldValue) {
let self = this;
if (!newValue) {
$(".tzdDom").css("display", "none");
......@@ -4287,7 +4647,7 @@ export default {
$(".tzdDom").css("display", "flex");
}
},
isHideMarkPoint (newValue, oldValue) {
isHideMarkPoint(newValue, oldValue) {
let self = this;
if (newValue) {
this.circleArr.forEach((item) => {
......@@ -4314,7 +4674,7 @@ export default {
}
},
},
beforeDestroy () {
beforeDestroy() {
// 组件销毁前需要解绑事件。否则会出现重复触发事件的问题
// this.$bus.off('ryzwbjImage');
this.$bus.off("ryzwbjType");
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment