1649 lines
66 KiB
JavaScript
1649 lines
66 KiB
JavaScript
new Vue({
|
||
el: "#container",
|
||
data: {
|
||
urls: [],
|
||
canvas: null,
|
||
image: null,
|
||
scale: 1,
|
||
angle: 0,
|
||
totalAngle: 0,
|
||
WebScan: null,
|
||
isSetup: false,
|
||
showBlankThre: false,
|
||
showHotPixel: false,
|
||
licence: 'gE/rN4vZATMg49y/OCFlZA==',
|
||
form: {
|
||
device: '',
|
||
autofeeder: true,//自动进纸 false:只扫一张 true:扫描到没纸为止
|
||
pixel: 1,//扫描模式 0：黑白 1：灰度 2：彩色
|
||
white: false,//丢弃空白页
|
||
discardBlankThre: 5,//跳过空白页阈值 1-100
|
||
single: false,//单面扫描
|
||
format: "jpg",//保存格式 jpg png bmp tiff pdf ofd
|
||
resolution: 100,//扫描分辨率 100-600
|
||
orentation: 0,//图片旋转 0：原图 90：旋转90度 180：旋转180度 270：旋转270度
|
||
paperType: "Auto",//扫描幅面 A3 Auto:自适应幅面 A4 A4R:A4横向
|
||
splitImage: 0,//图像分割 0 disable 1垂直分割 2 水平分割
|
||
noiseDetachEnable: true,//去除噪点 scanner
|
||
noiseDetach: 15,//噪点阈值 10-50 scanner
|
||
prefix: '',
|
||
backRotate180: false,
|
||
upload: {//上传参数
|
||
uploadMode: 2,//是否边扫边上传 0：http 1：ftp 2:不上传
|
||
httpUrl: '',//上传地址
|
||
fileName: '',//接收文件参数名
|
||
httpMethod: '',//上传方式 GET POST PUT
|
||
header: '',//请求头
|
||
param: '',//参数 json格式
|
||
ftpUrl: '',//ftp 地址
|
||
ftpPath: '/images',//路径
|
||
ftpUser: '',//ftp 用户名
|
||
ftpPassword: '',//ftp 密码
|
||
ftpPort: 21,//端口号
|
||
ftpMode: 2//连接模式 1：主动 2：被动
|
||
}
|
||
},
|
||
devices: [],
|
||
pid: "",
|
||
imageName: '',
|
||
loading: null,
|
||
loadingPageShow: false,
|
||
rectificationDialog: false,
|
||
repSliderValue: 0,
|
||
rules: {
|
||
device: [
|
||
{required: true, message: '请选择扫描仪', trigger: 'blur'}
|
||
],
|
||
'upload.httpUrl': [{
|
||
validator: this.validateHttpSet, trigger: 'blur'
|
||
}],
|
||
'upload.httpMethod': [{
|
||
validator: this.validateHttpSet, trigger: 'blur'
|
||
}],
|
||
'upload.fileName': [{
|
||
validator: this.validateHttpSet, trigger: 'blur'
|
||
}],
|
||
'upload.ftpUrl': [{
|
||
validator: this.validateFtpSet, trigger: 'blur'
|
||
}],
|
||
'upload.ftpPath': [{
|
||
validator: this.validateFtpSet, trigger: 'blur'
|
||
}]
|
||
},
|
||
validateHttpSet: function (rule, value, callback) {
|
||
if (this.form.upload.uploadMode == '0' && value == '') {
|
||
callback(new Error('请输入必填项'));
|
||
}
|
||
},
|
||
validateFtpSet: function (rule, value, callback) {
|
||
if (this.form.upload.uploadMode == '1' && value == '') {
|
||
callback(new Error('请输入必填项'));
|
||
}
|
||
},
|
||
activeName: '1',
|
||
isInsertScan: false,
|
||
selectImageObj: {
|
||
index: -1
|
||
},
|
||
redoStack: [],
|
||
undoStack: [],
|
||
startP: null,
|
||
isUploadAllImage: false,
|
||
uploadAllForm: {
|
||
uploadMode: 0,
|
||
httpUrl: '',
|
||
fileName: '',
|
||
httpMethod: '',
|
||
header: '',
|
||
param: '',
|
||
ftpUrl: '',
|
||
ftpPath: '/images',
|
||
ftpUser: '',
|
||
ftpPassword: '',
|
||
ftpPort: 21,
|
||
ftpMode: 2,
|
||
format: 2
|
||
},
|
||
uploadAllRules: {
|
||
'httpUrl': [{
|
||
validator: this.validateUploadAllHttpSet, trigger: 'blur'
|
||
}],
|
||
'httpMethod': [{
|
||
validator: this.validateUploadAllHttpSet, trigger: 'blur'
|
||
}],
|
||
'fileName': [{
|
||
validator: this.validateUploadAllHttpSet, trigger: 'blur'
|
||
}],
|
||
'ftpUrl': [{
|
||
validator: this.validateUploadAllFtpSet, trigger: 'blur'
|
||
}],
|
||
'ftpPath': [{
|
||
validator: this.validateUploadAllFtpSet, trigger: 'blur'
|
||
}]
|
||
},
|
||
assistLine: null,
|
||
assistText: null,
|
||
selectManyImages: [],
|
||
validateUploadAllHttpSet: function (rule, value, callback) {
|
||
if (this.uploadAllForm.uploadMode == '0' && value == '') {
|
||
callback(new Error('请输入必填项'));
|
||
}
|
||
},
|
||
validateUploadAllFtpSet: function (rule, value, callback) {
|
||
if (this.uploadAllForm.uploadMode == '1' && value == '') {
|
||
callback(new Error('请输入必填项'));
|
||
}
|
||
},
|
||
},
|
||
created: function () {
|
||
//Vue的方法给原生调用，则需要把方法挂在Window下面
|
||
window.eleLoadding = this.eleLoadding;
|
||
window.eleAlert = this.eleMessage;
|
||
window.scanCallBack = this.scanCallBack;
|
||
window.setupWindowCallBack = this.setupWindowCallBack
|
||
},
|
||
mounted: function () {
|
||
var width = $("#canvas-container").width();
|
||
var height = $("#canvas-container").height();
|
||
|
||
var canvas = new fabric.Canvas(
|
||
'imageCanvas',
|
||
{
|
||
allowTouchScrolling: true,
|
||
centeredRotation: true,
|
||
centeredScaling: true,
|
||
defaultCursor: 'default',
|
||
hoverCursor: 'default',
|
||
backgroundColor: "#ffffff",
|
||
backgroundVpt: true,
|
||
width: 500,
|
||
height: 300
|
||
}
|
||
);
|
||
this.canvas = canvas;
|
||
|
||
let that = this
|
||
|
||
|
||
this.WebScan = new WebScan({
|
||
url: 'http://127.0.0.1:18999/WebScan',
|
||
wsUrl: 'http://127.0.0.1:28999/',
|
||
licence: that.licence
|
||
});
|
||
this.WebScan.disconnect();
|
||
this.init();
|
||
},
|
||
watch: {
|
||
'form.white'(newvalue, oldvalue) {
|
||
this.showBlankThre = newvalue
|
||
},
|
||
|
||
'form.noiseDetachEnable'(newvalue, oldvalue) {
|
||
this.showHotPixel = newvalue
|
||
}
|
||
},
|
||
methods: {
|
||
setupWindowCallBack: function (configJson) {
|
||
alert('配置项为:' + configJson)
|
||
console.log('配置项为:' + configJson)
|
||
},
|
||
setup: function () {
|
||
this.isSetup = true;
|
||
},
|
||
eleLoadding: function () {
|
||
return this.$loading({
|
||
lock: true,
|
||
text: 'Loading',
|
||
spinner: 'el-icon-loading',
|
||
target: '#container',
|
||
background: 'rgba(0,0,0,0.7)'
|
||
});
|
||
},
|
||
eleUnloadding: function () {
|
||
this.loading.close();
|
||
},
|
||
eleMessage: function (msg, sign) {
|
||
this.$message({
|
||
message: msg,
|
||
type: sign,
|
||
duration: 2000
|
||
});
|
||
},
|
||
whiteChanged: function (e) {
|
||
this.showBlankThre = e
|
||
},
|
||
hotPixelChanged: function (e) {
|
||
this.showHotPixel = e
|
||
},
|
||
selectImage: function (image, index) {
|
||
this.selectImageObj = {
|
||
"image": image,
|
||
"index": index
|
||
}
|
||
// console.log("selectImage: " + JSON.stringify(this.selectImageObj))
|
||
this.loadImage(image);
|
||
this.selectManyImages = new Array();
|
||
this.selectManyImages.push(index);
|
||
|
||
},
|
||
selectManyImage: function (image, index) {
|
||
var indexof = this.selectManyImages.indexOf(index);
|
||
if (indexof >= 0) {
|
||
var nextIndex = indexof + 1;
|
||
if (nextIndex < this.selectManyImages.length) {
|
||
var index = this.selectManyImages[nextIndex];
|
||
this.selectImageObj = {
|
||
"image": this.urls[index],
|
||
"index": index
|
||
}
|
||
this.loadImage(this.urls[index]);
|
||
} else {
|
||
var preIndex = indexof - 1;
|
||
if (preIndex >= 0) {
|
||
var index = this.selectManyImages[preIndex];
|
||
this.selectImageObj = {
|
||
"image": this.urls[index],
|
||
"index": index
|
||
}
|
||
this.loadImage(this.urls[index]);
|
||
} else {
|
||
this.loadImage(null);
|
||
$(".canvas-container").css("border", "none");
|
||
}
|
||
}
|
||
this.selectManyImages.splice(indexof, 1);
|
||
} else {
|
||
this.selectManyImages.push(index);
|
||
this.loadImage(image);
|
||
}
|
||
},
|
||
init: function () {
|
||
var that = this;
|
||
var loading = this.eleLoadding();
|
||
this.WebScan.initSef(function (result) {
|
||
console.log("initSef: " + JSON.stringify(result))
|
||
|
||
if (result.code != 200) {
|
||
that.eleMessage('初始化失败', "error");
|
||
loading.close();
|
||
return;
|
||
}
|
||
that.pid = result.data;
|
||
//获取上次的扫描结果
|
||
that.getHistoryImages();
|
||
that.getDevices();
|
||
loading.close();
|
||
});
|
||
},
|
||
/* getAllImages: function () {
|
||
var that = this;
|
||
var loading = this.eleLoadding();
|
||
this.WebScan.getAllImages(function (result) {
|
||
// console.log("getAllImages: " + JSON.stringify(result))
|
||
|
||
loading.close();
|
||
if (result.code == 200) {
|
||
if (result.data != null && result.data.length > 0) {
|
||
that.urls = result.data;
|
||
}
|
||
} else {
|
||
that.eleMessage(result.msg, "warning");
|
||
}
|
||
})
|
||
},*/
|
||
getHistoryImages: function () {
|
||
var that = this;
|
||
let loading = this.eleLoadding();
|
||
|
||
this.WebScan.getHistoryImagesCount(function (result) {
|
||
console.log("getHistoryImagesCount: " + JSON.stringify(result))
|
||
loading.close();
|
||
if (result.code == 200) {
|
||
if (result.data != null) {
|
||
let count = result.data;
|
||
that.urls = Array.from({length: count}, () => '');
|
||
|
||
let onceCount = 40;
|
||
let number = Math.floor(count / onceCount);
|
||
if (count % onceCount != 0) {
|
||
number = number + 1;
|
||
}
|
||
console.log("getRangeImage number: " + number)
|
||
|
||
for (let i = 0; i < number; i++) {
|
||
|
||
that.WebScan.getRangeImage(i * onceCount, onceCount, function (result) {
|
||
// console.log("getRangeImage: " + JSON.stringify(result))
|
||
|
||
let startIndex = parseInt(result.data.startIndex);
|
||
|
||
let list = result.data.images;
|
||
let length = list.length;
|
||
|
||
console.log("getRangeImage length: " + length)
|
||
|
||
for (let j = startIndex; j < startIndex + length; j++) {
|
||
that.urls[j] = list[j - startIndex]
|
||
}
|
||
|
||
})
|
||
}
|
||
}
|
||
} else {
|
||
that.eleMessage(result.msg, "warning");
|
||
}
|
||
})
|
||
},
|
||
deleteImage: function () {
|
||
var that = this;
|
||
if (this.selectImageObj == null || this.selectImageObj.image == null
|
||
|| this.selectImageObj.index == -1
|
||
) {
|
||
this.eleMessage("请选择要删除的图像", "warning");
|
||
return;
|
||
}
|
||
|
||
if (this.selectImageObj.image.imageName == null ||
|
||
this.selectImageObj.image.imageName.length === 0) {
|
||
this.eleMessage("当前图像异常", "warning");
|
||
return;
|
||
}
|
||
|
||
this.$confirm('此操作将永久删除该文件, 是否继续?', '删除', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
callback: function (value) {
|
||
if (value == 'confirm') {
|
||
var loading = that.eleLoadding();
|
||
that.WebScan.deleteImage(that.selectImageObj.image.imageName, function (result) {
|
||
console.log("deleteImage: " + JSON.stringify(result))
|
||
|
||
loading.close();
|
||
if (result.code == 200) {
|
||
that.urls.splice(that.selectImageObj.index, 1);
|
||
if (that.selectImageObj.image.imageName == that.imageName) {
|
||
if (that.urls.length > that.selectImageObj.index) {
|
||
//选中下一个元素
|
||
that.loadImage(that.urls[that.selectImageObj.index]);
|
||
} else {
|
||
that.clearDivListener();
|
||
that.canvas.clear();
|
||
that.canvas.setZoom(1);
|
||
that.scale = 1;
|
||
that.angle = 0;
|
||
that.totalAngle = 0;
|
||
that.canvas.discardActiveObject();
|
||
$(".canvas-container").css("border", "none");
|
||
}
|
||
}
|
||
that.eleMessage("删除成功", "success");
|
||
} else {
|
||
that.eleMessage(result.msg, "warning");
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
deleteAllImage: function () {
|
||
var that = this;
|
||
this.$confirm('此操作将永久清除该批次文件, 是否继续?', '清空列表', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
callback: function (value) {
|
||
if (value == 'confirm') {
|
||
var loading = that.eleLoadding();
|
||
var result = that.WebScan.deleteAllImage(function (result) {
|
||
console.log("deleteAllImage: " + JSON.stringify(result))
|
||
|
||
loading.close();
|
||
if (result.code == 200) {
|
||
that.urls = new Array();
|
||
that.eleMessage("清空成功", "success");
|
||
window.location.reload();
|
||
} else {
|
||
that.eleMessage(result.msg, "warning");
|
||
}
|
||
});
|
||
}
|
||
}
|
||
})
|
||
},
|
||
addOptActive: function (e) {
|
||
if (e == null || e == undefined) {
|
||
return;
|
||
}
|
||
$(e.currentTarget).addClass("active");
|
||
$(e.currentTarget).siblings().removeClass("active");
|
||
},
|
||
getDevices: function () {
|
||
var that = this;
|
||
this.WebScan.getDevices(function (result) {
|
||
console.log("getDevices: " + JSON.stringify(result))
|
||
if (result.code != 200) {
|
||
that.eleMessage(result.msg, "warning");
|
||
return;
|
||
} else {
|
||
that.devices = result.data;
|
||
//获取浏览器中的内存
|
||
var localDevice = localStorage.getItem('webscan_device');
|
||
if (localDevice != null && devices.contains(localDevice)) {
|
||
that.form.device = localDevice;
|
||
}
|
||
if (that.devices != null && that.devices.length > 0) {
|
||
that.form.device = that.devices[0];
|
||
}
|
||
}
|
||
that.getUploadParam();
|
||
});
|
||
},
|
||
getUploadParam: function () {
|
||
var that = this;
|
||
this.WebScan.getParams(function (result) {
|
||
console.log("getParams: " + JSON.stringify(result))
|
||
|
||
if (result.code != 200) {
|
||
that.eleMessage(result.msg, "warning");
|
||
return;
|
||
} else {
|
||
if (result.data != null) {
|
||
if (that.devices == null || that.devices.length < 0) {
|
||
that.form.device = '';
|
||
}
|
||
|
||
that.form = result.data;
|
||
}
|
||
}
|
||
});
|
||
},
|
||
getLastBatch: function () {
|
||
var that = this;
|
||
if (that.WebScan.url) {
|
||
utils.get({
|
||
"url": that.WebScan.url + "/getLastBatch",
|
||
cache: false,
|
||
success: function (data) {
|
||
console.log("getLastBatch: " + JSON.stringify(data))
|
||
if (data.code == 200) {
|
||
if (data.data != null && data.data != that.pid) {
|
||
window.location.reload();
|
||
} else {
|
||
that.eleMessage("当前批次已是最新批次", "warning");
|
||
return;
|
||
}
|
||
} else {
|
||
that.eleMessage(data.msg, "warning");
|
||
return;
|
||
}
|
||
}
|
||
})
|
||
}
|
||
},
|
||
scan: function () {
|
||
var result = this.WebScan.startScan(window.scanCallBack, null);
|
||
if (result.code != 200) {
|
||
this.eleMessage(result.msg, "warning");
|
||
return;
|
||
}
|
||
this.loading = this.eleLoadding();
|
||
},
|
||
insertScan: function () {
|
||
if (this.selectImageObj == null || this.selectImageObj.image == null ||
|
||
this.selectImageObj.image.imageName == undefined) {
|
||
this.eleMessage("请选择插入图像", "warning");
|
||
}
|
||
|
||
var imageName = this.selectImageObj.image.imageName;
|
||
var scanData = {
|
||
"imageName": imageName,
|
||
"isInsert": true,
|
||
}
|
||
var result = this.WebScan.startScan(window.scanCallBack, scanData);
|
||
if (result.code != 200) {
|
||
this.eleMessage(result.msg, "warning");
|
||
return;
|
||
}
|
||
this.isInsertScan = true;
|
||
this.loading = this.eleLoadding();
|
||
},
|
||
stopScan: function () {
|
||
var result = this.WebScan.stopScan(window.scanCallBack, null);
|
||
if (result.code != 200) {
|
||
this.eleMessage(result.msg, "warning");
|
||
return;
|
||
}
|
||
},
|
||
scanCallBack: function (data) {
|
||
this.eleUnloadding();
|
||
console.log("scanCallBack: " + JSON.stringify(data))
|
||
var that = this
|
||
var code = data.code;
|
||
if (code == 201) {
|
||
if (this.form.format === 'ofd' || this.form.format === 'pdf') {//生成的是一页的PDF ofd，直接下载
|
||
if (data.image != null && data.image != undefined) {
|
||
var blob = that.dataURLtoBlob(data.image);
|
||
var fileName = that.pid + "-" + data.imageName;
|
||
if (window.navigator.msSaveOrOpenBlob) {
|
||
navigator.msSaveBlob(blob, fileName);
|
||
} else {
|
||
that.blobToFile(blob, that.pid + "." + this.form.format);
|
||
let aLink = document.createElement('a');
|
||
document.body.appendChild(aLink);
|
||
let evt = document.createEvent("HTMLEvents");
|
||
evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错
|
||
// 事件类型，是否冒泡，是否阻止浏览器的默认行为
|
||
aLink.download = fileName;
|
||
aLink.href = URL.createObjectURL(blob);
|
||
aLink.click();
|
||
document.body.removeChild(aLink);
|
||
}
|
||
}
|
||
} else {//是图片
|
||
var image = {
|
||
"src": data.image,
|
||
"imageName": data.imageName
|
||
}
|
||
if (this.isInsertScan) {
|
||
//找到文件位置，插入元素
|
||
var index = this.selectImageObj.index;
|
||
this.urls.splice(index, 0, image);
|
||
this.selectImageObj.index += 1;
|
||
} else {
|
||
this.urls.push(image);
|
||
}
|
||
}
|
||
}
|
||
if (code == 203) {
|
||
this.isInsertScan = false;
|
||
}
|
||
|
||
if (code == 204) {//扫描结束
|
||
this.eleMessage(data.msg, "success");
|
||
}
|
||
if (data.code == 500) {
|
||
this.eleMessage(data.msg, "warning");
|
||
}
|
||
if (code == 200) {
|
||
console.log('连接成功')
|
||
}
|
||
},
|
||
ajustDimensions: function ($event) {
|
||
this.addOptActive($event);
|
||
this.clearDivListener();
|
||
if (this.image == null || this.image == undefined) {
|
||
return;
|
||
}
|
||
var width = $("#canvas-container").width() - 4;
|
||
var height = $("#canvas-container").height() - 4;
|
||
var zoom = Math.min(width / this.image.width, height / this.image.height);
|
||
//图像压缩
|
||
if (width > this.image.width && height > this.image.height) {
|
||
width = this.image.width;
|
||
height = this.image.height
|
||
} else if (zoom < 1) {
|
||
width = this.image.width * zoom;
|
||
height = this.image.height * zoom;
|
||
}
|
||
//判断是否需要横放
|
||
var oldEven = (this.totalAngle / 90) % 2;
|
||
if (oldEven != 0 && this.totalAngle % 90 == 0) {
|
||
this.canvas.setDimensions({
|
||
width: height,
|
||
height: width
|
||
})
|
||
} else {
|
||
this.canvas.setDimensions({
|
||
width: width,
|
||
height: height
|
||
})
|
||
}
|
||
this.canvas.setZoom(zoom);
|
||
this.scale = zoom;
|
||
this.canvas.renderAll.bind(this.canvas);
|
||
this.clearDivListener();
|
||
},
|
||
loadImage: function (imageSrc) {
|
||
this.clearDivListener();
|
||
this.canvas.clear();
|
||
this.canvas.setZoom(1);
|
||
this.scale = 1;
|
||
this.angle = 0;
|
||
this.totalAngle = 0;
|
||
this.canvas.discardActiveObject();
|
||
var that = this;
|
||
var src = imageSrc.src;
|
||
new fabric.Image.fromURL(src, function (image) {
|
||
that.image = image;
|
||
that.imageName = imageSrc.imageName;
|
||
that.canvas.add(image);
|
||
that.ajustDimensions();
|
||
}, {
|
||
selectable: false
|
||
});
|
||
$(".canvas-container").css("border", "2px solid #e1e1e1");
|
||
},
|
||
realDimensions: function ($event) {
|
||
this.addOptActive($event);
|
||
this.clearDivListener();
|
||
if (this.image == null || this.image == undefined) {
|
||
return;
|
||
}
|
||
var that = this;
|
||
//判断是否需要横放
|
||
var oldEven = (this.totalAngle / 90) % 2;
|
||
if (oldEven != 0 && this.totalAngle % 90 == 0) {
|
||
this.canvas.setDimensions({
|
||
width: that.image.height,
|
||
height: that.image.width
|
||
})
|
||
} else {
|
||
this.canvas.setDimensions({
|
||
width: that.image.width,
|
||
height: that.image.height
|
||
})
|
||
}
|
||
this.canvas.setZoom(1);
|
||
this.canvas.renderAll.bind(this.canvas);
|
||
},
|
||
addListenerToDiv: function ($event) {
|
||
this.addOptActive($event);
|
||
this.clearDivListener();
|
||
var that = this;
|
||
var startX = 0;
|
||
var startY = 0;
|
||
this.canvas.defaultCursor = 'pointer';
|
||
this.canvas.hoverCursor = 'pointer';
|
||
$("#canvas-container").bind("mousedown", function (e) {
|
||
startX = e.offsetX;
|
||
startY = e.offsetY;
|
||
that.canvas.selection = false;
|
||
$("#canvas-container").bind("mousemove", function (e) {
|
||
var endX = e.offsetX;
|
||
var endY = e.offsetY;
|
||
var offsetX = startX - endX;
|
||
var offsetY = startY - endY;
|
||
//获取现在X的滚动长度
|
||
var scrollY = $(this).scrollTop();
|
||
//获取当前Y的滚动长度
|
||
var scrollX = $(this).scrollLeft();
|
||
$(this).scrollLeft(scrollX + offsetX);
|
||
$(this).scrollTop(scrollY + offsetY);
|
||
});
|
||
});
|
||
$("#canvas-container").bind("mouseup", function (e) {
|
||
$(this).unbind("mousemove");
|
||
});
|
||
},
|
||
clearDivListener: function () {
|
||
$("#canvas-container").unbind("mouseup");
|
||
$("#canvas-container").unbind("mousedown");
|
||
this.canvas.defaultCursor = 'default';
|
||
this.canvas.hoverCursor = 'default';
|
||
this.canvas.off("mouse:down");
|
||
this.canvas.off("mouse:up");
|
||
this.canvas.off("mouse:move");
|
||
this.rectificationDialog = false;
|
||
},
|
||
saveSetup: function () {
|
||
var that = this;
|
||
|
||
|
||
console.log('setparams:\n' + JSON.stringify(that.form))
|
||
|
||
this.WebScan.setParams(that.form, function (result) {
|
||
console.log("setParams: " + JSON.stringify(result))
|
||
|
||
if (result.code == 200) {
|
||
that.eleMessage(result.msg, "success");
|
||
that.isSetup = false;
|
||
} else {
|
||
that.eleMessage(result.msg, "warning");
|
||
}
|
||
})
|
||
},
|
||
scaleMax: function ($event) {
|
||
this.addOptActive($event);
|
||
this.clearDivListener();
|
||
var height = this.$refs.canvasContainer.offsetHeight;
|
||
var width = this.$refs.canvasContainer.offsetWidth;
|
||
if (this.image == null) {
|
||
this.$message.warning('请选择图像进行操作');
|
||
return;
|
||
}
|
||
var offset = 0.1;
|
||
var scale = this.scale;
|
||
scale += offset;
|
||
var canvasWidth = this.image.width * scale;
|
||
var canvasHeight = this.image.height * scale;
|
||
var oldEven = (this.totalAngle / 90) % 2;
|
||
if (oldEven != 0 && this.totalAngle % 90 == 0) {
|
||
this.canvas.setDimensions({
|
||
width: canvasHeight,
|
||
height: canvasWidth
|
||
})
|
||
} else {
|
||
this.canvas.setDimensions({
|
||
width: canvasWidth,
|
||
height: canvasHeight
|
||
})
|
||
}
|
||
this.canvas.setZoom(scale);
|
||
this.scale = scale;
|
||
},
|
||
scaleMin: function ($event) {
|
||
this.addOptActive($event);
|
||
this.clearDivListener();
|
||
var height = this.$refs.canvasContainer.offsetHeight;
|
||
var width = this.$refs.canvasContainer.offsetWidth;
|
||
if (this.image == null) {
|
||
this.$message.warning("请选择图像进行操作");
|
||
return;
|
||
}
|
||
var offset = 0.1;
|
||
var scale = this.scale;
|
||
scale -= offset;
|
||
if (scale < 0.1) {
|
||
scale = 0.1;
|
||
}
|
||
var canvasWidth = this.image.width * scale;
|
||
var canvasHeight = this.image.height * scale;
|
||
var oldEven = (this.totalAngle / 90) % 2;
|
||
if (oldEven != 0 && this.totalAngle % 90 == 0) {
|
||
this.canvas.setDimensions({
|
||
width: canvasHeight,
|
||
height: canvasWidth
|
||
})
|
||
} else {
|
||
this.canvas.setDimensions({
|
||
width: canvasWidth,
|
||
height: canvasHeight
|
||
})
|
||
}
|
||
this.canvas.setZoom(scale);
|
||
this.scale = scale;
|
||
},
|
||
rotate: function (rotate, $event) {
|
||
if ($event != undefined) {
|
||
this.addOptActive($event);
|
||
}
|
||
this.clearDivListener();
|
||
this.redoStack.length = 0;
|
||
this.rotateAngle(rotate);
|
||
//添加undo
|
||
var undo = {
|
||
"type": 'rotate',
|
||
"angle": rotate
|
||
}
|
||
this.undoStack.push(undo);
|
||
},
|
||
rotateAngle: function (rotate) {
|
||
var that = this;
|
||
// this.angle+=rotate;
|
||
var zoom = this.canvas.getZoom();
|
||
var group = new fabric.ActiveSelection(this.canvas.getObjects(), {
|
||
selectable: false,
|
||
hasBorders: false,
|
||
hasControls: false,
|
||
centeredRotation: true,
|
||
originX: "center",
|
||
originY: "center"
|
||
});
|
||
this.totalAngle += rotate;
|
||
group.rotate(rotate);
|
||
//旋转后的角度
|
||
var oldEven = (this.totalAngle / 90) % 2;
|
||
if (oldEven != 0 && this.totalAngle % 90 == 0) {
|
||
//设置group偏移
|
||
group.set({
|
||
left: that.image.height / 2,
|
||
top: this.image.width / 2
|
||
});
|
||
this.canvas.setDimensions({
|
||
width: that.image.height * zoom,
|
||
height: that.image.width * zoom
|
||
});
|
||
} else {
|
||
group.set({
|
||
left: that.image.width / 2,
|
||
top: this.image.height / 2
|
||
});
|
||
// console.log(group.getCenterPointer());
|
||
// console.log(that.image.width/2+","+this.imageHeight/2);
|
||
this.canvas.setDimensions({
|
||
width: that.image.width * zoom,
|
||
height: that.image.height * zoom
|
||
});
|
||
this.canvas.setBackgroundColor("#ffffff");
|
||
}
|
||
this.canvas.renderAll();
|
||
group.destroy();
|
||
},
|
||
/**
|
||
* 纠偏
|
||
* @param {Object} $event
|
||
*/
|
||
rectification: function ($event) {
|
||
if ($event != undefined) {
|
||
this.addOptActive($event);
|
||
}
|
||
this.clearDivListener();
|
||
this.rectificationDialog = true;
|
||
this.repSliderValue = 0;
|
||
},
|
||
sliderRotateChange: function (value) {
|
||
var that = this;
|
||
var rotate = value - this.angle;
|
||
this.angle = value;
|
||
this.redoStack.length = 0;
|
||
this.rotateAngle(rotate);
|
||
//添加undo
|
||
var undo = {
|
||
"type": 'rotate',
|
||
"angle": rotate
|
||
}
|
||
this.undoStack.push(undo);
|
||
|
||
},
|
||
innerErase: function ($event) {
|
||
this.addOptActive($event);
|
||
this.clearDivListener();
|
||
var that = this;
|
||
this.redoStack.length = 0;
|
||
// this.canvas.discardActiveObject();
|
||
var that = this;
|
||
this.canvas.hoverCursor = 'crosshair';
|
||
this.canvas.defaultCursor = 'crosshair';
|
||
this.canvas.selection = true;
|
||
this.canvas.on("mouse:down", function (e) {
|
||
that.startP = that.canvas.getPointer(e);
|
||
})
|
||
that.canvas.on("mouse:up", function (e) {
|
||
endPointer = that.canvas.getPointer(e);
|
||
if (endPointer.x == that.startP.x && endPointer.y == that.startP.y) {
|
||
return;
|
||
}
|
||
//计算开始结束点和范围
|
||
var width = endPointer.x - that.startP.x;
|
||
var height = endPointer.y - that.startP.y;
|
||
if (width < 0) {
|
||
width = -width;
|
||
}
|
||
if (height < 0) {
|
||
height = -height;
|
||
}
|
||
var startLeft = that.startP;
|
||
if (endPointer.x < startLeft.x) {
|
||
startLeft.x = endPointer.x;
|
||
}
|
||
if (endPointer.y < startLeft.y) {
|
||
startLeft.y = endPointer.y;
|
||
}
|
||
//添加矩形区域
|
||
var rect = new fabric.Rect({
|
||
fill: 'rgb(255,255,255)',
|
||
hasBorders: false,
|
||
hasControls: false,
|
||
left: startLeft.x,
|
||
top: startLeft.y,
|
||
width: width,
|
||
height: height,
|
||
preserveObjectStacking: true,
|
||
selectable: false
|
||
})
|
||
that.canvas.add(rect);
|
||
var objects = new Array();
|
||
objects.push(rect);
|
||
var undo = {
|
||
"type": 'addObjects',
|
||
"objects": objects
|
||
}
|
||
that.undoStack.push(undo);
|
||
});
|
||
},
|
||
outerErase: function ($event) {
|
||
this.redoStack.length = 0;
|
||
this.addOptActive($event);
|
||
this.clearDivListener();
|
||
var that = this;
|
||
// this.canvas.discardActiveObject();
|
||
this.canvas.hoverCursor = 'crosshair';
|
||
this.canvas.selection = true;
|
||
this.canvas.on("mouse:down", function (e) {
|
||
that.startP = that.canvas.getPointer(e);
|
||
// console.log(that.startP);
|
||
})
|
||
that.canvas.on("mouse:up", function (e) {
|
||
var endPointer = that.canvas.getPointer(e);
|
||
if (endPointer.x == that.startP.x && endPointer.y == that.startP.y) {
|
||
return;
|
||
}
|
||
//计算开始结束点和范围
|
||
var width = endPointer.x - that.startP.x;
|
||
width = width < 0 ? -width : width;
|
||
var height = endPointer.y - that.startP.y;
|
||
height = height < 0 ? -height : height;
|
||
|
||
var startP = {x: that.startP.x, y: that.startP.y};
|
||
var endP = {x: endPointer.x, y: endPointer.y}
|
||
if (endPointer.x < that.startP.x) {
|
||
startP.x = endPointer.x;
|
||
endP.x = that.startP.x;
|
||
}
|
||
if (endPointer.y < that.startP.y) {
|
||
startP.y = endPointer.y;
|
||
endP.y = that.startP.y;
|
||
}
|
||
var objects = new Array();
|
||
//区域外的地方设置为透明
|
||
var rectTop = new fabric.Rect({
|
||
fill: 'rgb(255,255,255)',
|
||
hasBorders: false,
|
||
hasControls: false,
|
||
left: 0,
|
||
top: 0,
|
||
width: that.image.width,
|
||
height: startP.y,
|
||
selectable: false
|
||
})
|
||
that.canvas.add(rectTop);
|
||
objects.push(rectTop);
|
||
var rectLeft = new fabric.Rect({
|
||
fill: 'rgb(255,255,255)',
|
||
hasBorders: false,
|
||
hasControls: false,
|
||
left: 0,
|
||
top: 0,
|
||
width: startP.x,
|
||
height: that.image.height,
|
||
selectable: false
|
||
})
|
||
that.canvas.add(rectLeft);
|
||
objects.push(rectLeft);
|
||
var rectBottom = new fabric.Rect({
|
||
fill: 'rgb(255,255,255)',
|
||
hasBorders: false,
|
||
hasControls: false,
|
||
left: 0,
|
||
top: endP.y,
|
||
width: that.image.width,
|
||
height: that.image.height - endP.y,
|
||
selectable: false
|
||
})
|
||
that.canvas.add(rectBottom);
|
||
objects.push(rectBottom);
|
||
var rectRight = new fabric.Rect({
|
||
fill: 'rgb(255,255,255)',
|
||
hasBorders: false,
|
||
hasControls: false,
|
||
left: endP.x,
|
||
top: 0,
|
||
width: that.image.width - endP.x,
|
||
height: that.image.height,
|
||
selectable: false
|
||
})
|
||
that.canvas.add(rectRight);
|
||
objects.push(rectRight);
|
||
var undo = {
|
||
"type": 'addObjects',
|
||
"objects": objects
|
||
}
|
||
that.undoStack.push(undo);
|
||
});
|
||
},
|
||
undo: function ($event) {
|
||
if (this.undoStack.length <= 0) {
|
||
return false;
|
||
}
|
||
this.addOptActive($event);
|
||
this.clearDivListener();
|
||
var undo = this.undoStack.pop();
|
||
if (undo == undefined) {
|
||
return false;
|
||
}
|
||
if (undo.type == 'rotate') {
|
||
var rotate = undo.angle;
|
||
this.rotateAngle(-rotate);
|
||
//添加redo
|
||
var redo = {
|
||
"type": "rotate",
|
||
"angle": -rotate
|
||
}
|
||
this.redoStack.push(redo);
|
||
}
|
||
if (undo.type == 'addObjects') {
|
||
var objects = undo.objects;
|
||
if (objects != null && objects.length > 0) {
|
||
for (var i = 0; i < objects.length; i++) {
|
||
var obj = objects[i];
|
||
this.canvas.remove(obj);
|
||
}
|
||
}
|
||
var redo = {
|
||
"type": "addObjects",
|
||
"objects": objects
|
||
}
|
||
this.redoStack.push(redo);
|
||
}
|
||
},
|
||
redo: function ($event) {
|
||
if (this.redoStack.length <= 0) {
|
||
return false;
|
||
}
|
||
this.addOptActive($event);
|
||
this.clearDivListener();
|
||
var that = this;
|
||
var redo = this.redoStack.pop();
|
||
if (redo.type == 'rotate') {
|
||
var rotate = redo.angle;
|
||
this.rotateAngle(-rotate);
|
||
//添加redo
|
||
var undo = {
|
||
"type": "rotate",
|
||
"angle": -rotate
|
||
}
|
||
this.undoStack.push(undo);
|
||
}
|
||
if (redo.type == 'addObjects') {
|
||
var objects = redo.objects;
|
||
if (objects != null && objects.length > 0) {
|
||
for (var i = 0; i < objects.length; i++) {
|
||
var obj = objects[i];
|
||
this.canvas.add(obj);
|
||
}
|
||
}
|
||
var undo = {
|
||
"type": "addObjects",
|
||
"objects": objects
|
||
}
|
||
this.undoStack.push(undo);
|
||
}
|
||
},
|
||
save: function () {
|
||
if (this.imageName == null || this.imageName == '') {
|
||
this.eleMessage("请选择图像", "warning");
|
||
return;
|
||
}
|
||
this.clearDivListener();
|
||
|
||
var zoom = this.canvas.getZoom();
|
||
zoom = 1 / zoom;
|
||
var dataUrl = this.canvas.toDataURL({
|
||
format: 'jpeg',
|
||
multiplier: zoom,
|
||
quality: 1
|
||
});
|
||
|
||
var that = this;
|
||
var loading = this.eleLoadding();
|
||
// console.log('save image dataUrl:' + dataUrl)
|
||
this.WebScan.saveImage(this.imageName, dataUrl, function (result) {
|
||
loading.close();
|
||
if (result.code == 200) {
|
||
that.eleMessage("保存成功", "success");
|
||
that.undoStack.length = 0;
|
||
that.redoStack.length = 0;
|
||
//获取选中的一张重新赋值
|
||
that.selectImageObj.image.src = dataUrl;
|
||
} else {
|
||
that.eleMessage(result.msg, "warning");
|
||
}
|
||
});
|
||
},
|
||
exportOfd: function () {
|
||
if (this.urls == null || this.urls.length <= 0) {
|
||
this.eleMessage("该批次不包含图像", "warning");
|
||
return;
|
||
}
|
||
var loading = this.eleLoadding();
|
||
var that = this;
|
||
this.WebScan.majorOFD(true, function (result) {
|
||
// console.log("majorOFD: " + JSON.stringify(result))
|
||
|
||
loading.close();
|
||
if (result.code == 200) {
|
||
var data = result.data;
|
||
if (data != null && data != undefined) {
|
||
var blob = that.dataURLtoBlob(data);
|
||
var ofdName = that.pid + ".ofd";
|
||
if (window.navigator.msSaveOrOpenBlob) {
|
||
navigator.msSaveBlob(blob, ofdName);
|
||
} else {
|
||
var file = that.blobToFile(blob, that.pid + ".ofd");
|
||
var aLink = document.createElement('a');
|
||
document.body.appendChild(aLink);
|
||
var evt = document.createEvent("HTMLEvents");
|
||
evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错
|
||
// 事件类型，是否冒泡，是否阻止浏览器的默认行为
|
||
aLink.download = that.pid + ".ofd";
|
||
aLink.href = URL.createObjectURL(blob);
|
||
aLink.click();
|
||
document.body.removeChild(aLink);
|
||
}
|
||
}
|
||
} else {
|
||
that.eleMessage(result.msg, "warning");
|
||
}
|
||
});
|
||
},
|
||
exportOfdFile: function () {
|
||
|
||
if (this.urls == null || this.urls.length <= 0) {
|
||
this.eleMessage("该批次不包含图像", "warning");
|
||
return;
|
||
}
|
||
var loading = this.eleLoadding();
|
||
var that = this;
|
||
this.WebScan.majorOFDFile(true, function (result) {
|
||
// console.log("majorOFD: " + JSON.stringify(result))
|
||
|
||
loading.close();
|
||
if (result.status == 200) {
|
||
// 返回200
|
||
var blob = result.response;
|
||
/* var reader = new FileReader();
|
||
reader.readAsDataURL(blob);
|
||
reader.onload = function (e) {
|
||
// 转换完成，创建一个a标签用于下载
|
||
var a = document.createElement('a');
|
||
a.download = that.pid+'.ofd';
|
||
a.href = e.target.result;
|
||
$("body").append(a); // 修复firefox中无法触发click
|
||
a.click();
|
||
$(a).remove();
|
||
}*/
|
||
saveAs(blob, that.pid + '.ofd')
|
||
} else {
|
||
that.eleMessage(result.msg, "warning");
|
||
}
|
||
});
|
||
},
|
||
exportPdf: function () {
|
||
if (this.urls == null || this.urls.length <= 0) {
|
||
this.eleMessage("该批次不包含图像", "warning");
|
||
return;
|
||
}
|
||
var loading = this.eleLoadding();
|
||
var that = this;
|
||
this.WebScan.majorPDF(function (result) {
|
||
// console.log("majorPDF: " + JSON.stringify(result))
|
||
|
||
loading.close();
|
||
if (result.code == 200) {
|
||
var data = result.data;
|
||
if (data != null && data != undefined) {
|
||
var blob = that.dataURLtoBlob(data);
|
||
var ofdName = that.pid + ".pdf";
|
||
if (window.navigator.msSaveOrOpenBlob) {
|
||
navigator.msSaveBlob(blob, ofdName);
|
||
} else {
|
||
var file = that.blobToFile(blob, that.pid + ".pdf");
|
||
var aLink = document.createElement('a');
|
||
document.body.appendChild(aLink);
|
||
var evt = document.createEvent("HTMLEvents");
|
||
evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错
|
||
// 事件类型，是否冒泡，是否阻止浏览器的默认行为
|
||
aLink.download = that.pid + ".pdf";
|
||
aLink.href = URL.createObjectURL(blob);
|
||
aLink.click();
|
||
document.body.removeChild(aLink);
|
||
}
|
||
}
|
||
} else {
|
||
that.$message.warning(result.msg);
|
||
}
|
||
});
|
||
loading.close();
|
||
},
|
||
exportPdfFile: function () {
|
||
if (this.urls == null || this.urls.length <= 0) {
|
||
this.eleMessage("该批次不包含图像", "warning");
|
||
return;
|
||
}
|
||
var loading = this.eleLoadding();
|
||
var that = this;
|
||
this.WebScan.majorPDFFile(function (result) {
|
||
// console.log("majorPDF: " + JSON.stringify(result.response))
|
||
|
||
loading.close();
|
||
if (result.status == 200) {
|
||
// 返回200
|
||
var blob = result.response;
|
||
/*var reader = new FileReader();
|
||
reader.readAsDataURL(blob); // 转换为base64，可以直接放入a表情href
|
||
reader.onload = function (e) {
|
||
// 转换完成，创建一个a标签用于下载
|
||
var a = document.createElement('a');
|
||
a.download = that.pid + '.pdf';
|
||
a.href = e.target.result;
|
||
$("body").append(a); // 修复firefox中无法触发click
|
||
a.click();
|
||
$(a).remove();
|
||
}*/
|
||
saveAs(blob, that.pid + '.pdf')
|
||
|
||
} else {
|
||
that.$message.warning(result.msg);
|
||
}
|
||
});
|
||
loading.close();
|
||
},
|
||
exportTiff: function () {
|
||
if (this.urls == null || this.urls.length <= 0) {
|
||
this.eleMessage("该批次不包含图像", "warning");
|
||
return;
|
||
}
|
||
var loading = this.eleLoadding();
|
||
var that = this;
|
||
this.WebScan.majorTiff(function (result) {
|
||
// console.log("majorTiff: " + JSON.stringify(result))
|
||
|
||
loading.close();
|
||
if (result.code == 200) {
|
||
var data = result.data;
|
||
if (data != null && data != undefined) {
|
||
var blob = that.dataURLtoBlob(data);
|
||
var ofdName = that.pid + ".tiff";
|
||
if (window.navigator.msSaveOrOpenBlob) {
|
||
navigator.msSaveBlob(blob, ofdName);
|
||
} else {
|
||
var file = that.blobToFile(blob, that.pid + ".tiff");
|
||
var aLink = document.createElement('a');
|
||
document.body.appendChild(aLink);
|
||
var evt = document.createEvent("HTMLEvents");
|
||
evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错
|
||
// 事件类型，是否冒泡，是否阻止浏览器的默认行为
|
||
aLink.download = that.pid + ".tiff";
|
||
aLink.href = URL.createObjectURL(blob);
|
||
aLink.click();
|
||
document.body.removeChild(aLink);
|
||
}
|
||
}
|
||
} else {
|
||
that.$message.warning(result.msg);
|
||
}
|
||
});
|
||
loading.close();
|
||
},
|
||
exportTiffFile: function () {
|
||
if (this.urls == null || this.urls.length <= 0) {
|
||
this.eleMessage("该批次不包含图像", "warning");
|
||
return;
|
||
}
|
||
var loading = this.eleLoadding();
|
||
var that = this;
|
||
this.WebScan.majorTiffFile(function (result) {
|
||
// console.log("majorTiff: " + result)
|
||
|
||
loading.close();
|
||
if (result.status == 200) {
|
||
// 返回200
|
||
var blob = result.response;
|
||
/* var reader = new FileReader();
|
||
reader.readAsDataURL(blob); // 转换为base64，可以直接放入a表情href
|
||
reader.onload = function (e) {
|
||
// 转换完成，创建一个a标签用于下载
|
||
var a = document.createElement('a');
|
||
a.download = 'dd.tiff';
|
||
a.href = e.target.result;
|
||
$("body").append(a); // 修复firefox中无法触发click
|
||
a.click();
|
||
$(a).remove();
|
||
}*/
|
||
|
||
saveAs(blob, that.pid + '.tiff')
|
||
|
||
} else {
|
||
that.$message.warning(result.msg);
|
||
}
|
||
});
|
||
loading.close();
|
||
},
|
||
exportZip: function () {
|
||
if (this.urls == null || this.urls.length <= 0) {
|
||
this.eleMessage("该批次不包含图像", "warning");
|
||
return;
|
||
}
|
||
var loading = this.eleLoadding();
|
||
var that = this;
|
||
this.WebScan.majorZip(function (result) {
|
||
// console.log("majorZip: " + JSON.stringify(result))
|
||
|
||
loading.close();
|
||
if (result.code == 200) {
|
||
var data = result.data;
|
||
if (data != null && data != undefined) {
|
||
var blob = that.dataURLtoBlob(data);
|
||
var ofdName = that.pid + ".zip";
|
||
if (window.navigator.msSaveOrOpenBlob) {
|
||
navigator.msSaveBlob(blob, ofdName);
|
||
} else {
|
||
var file = that.blobToFile(blob, that.pid + ".zip");
|
||
var aLink = document.createElement('a');
|
||
document.body.appendChild(aLink);
|
||
var evt = document.createEvent("HTMLEvents");
|
||
evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错
|
||
// 事件类型，是否冒泡，是否阻止浏览器的默认行为
|
||
aLink.download = that.pid + ".zip";
|
||
aLink.href = URL.createObjectURL(blob);
|
||
aLink.click();
|
||
document.body.removeChild(aLink);
|
||
}
|
||
}
|
||
} else {
|
||
that.$message.warning(result.msg);
|
||
}
|
||
});
|
||
loading.close();
|
||
},
|
||
exportZipFile: function () {
|
||
if (this.urls == null || this.urls.length <= 0) {
|
||
this.eleMessage("该批次不包含图像", "warning");
|
||
return;
|
||
}
|
||
var loading = this.eleLoadding();
|
||
var that = this;
|
||
this.WebScan.majorZipFile(function (result) {
|
||
// console.log("majorZip: " + JSON.stringify(result))
|
||
|
||
loading.close();
|
||
if (result.status == 200) {
|
||
// 返回200
|
||
var blob = result.response;
|
||
/* var reader = new FileReader();
|
||
reader.readAsDataURL(blob); // 转换为base64，可以直接放入a表情href
|
||
reader.onload = function (e) {
|
||
// 转换完成，创建一个a标签用于下载
|
||
var a = document.createElement('a');
|
||
a.download = 'dd.zip';
|
||
a.href = e.target.result;
|
||
$("body").append(a); // 修复firefox中无法触发click
|
||
a.click();
|
||
$(a).remove();
|
||
}*/
|
||
saveAs(blob, that.pid + '.zip')
|
||
|
||
} else {
|
||
that.$message.warning(result.msg);
|
||
}
|
||
});
|
||
loading.close();
|
||
},
|
||
// 将base64转换为blob
|
||
dataURLtoBlob: function (dataurl) {
|
||
var bstr = atob(dataurl)
|
||
var n = bstr.length
|
||
var u8arr = new Uint8Array(n)
|
||
while (n--) {
|
||
u8arr[n] = bstr.charCodeAt(n)
|
||
}
|
||
return new Blob([u8arr])
|
||
},
|
||
// 将blob转换为file
|
||
blobToFile: function (theBlob, fileName) {
|
||
theBlob.lastModifiedDate = new Date()
|
||
theBlob.name = fileName
|
||
return theBlob
|
||
},
|
||
upload: function () {
|
||
if (this.urls == null || this.urls.length <= 0) {
|
||
this.eleMessage("图像列表为空，请刷新后尝试", "warning");
|
||
return;
|
||
}
|
||
this.isUploadAllImage = true;
|
||
},
|
||
uploadAllImage: function () {
|
||
var that = this;
|
||
this.isUploadAllImage = false;
|
||
var loading = this.eleLoadding();
|
||
this.WebScan.uploadImage(this.uploadAllForm, function (result) {
|
||
console.log("uploadImage: " + JSON.stringify(result))
|
||
|
||
loading.close();
|
||
console.log("uploadAllImage code:" + result.code + " msg:" + result.msg)
|
||
if (result.code == 200) {
|
||
that.eleMessage("上传成功", "success");
|
||
} else {
|
||
that.eleMessage(result.msg, "warning");
|
||
}
|
||
})
|
||
},
|
||
resetPatchIndex: function () {
|
||
var that = this;
|
||
this.WebScan.resetPatchIndex(function (result) {
|
||
console.log("resetPatchIndex: " + JSON.stringify(result))
|
||
if (result.code === 200) {
|
||
var data = result.data;
|
||
if (data != null && data != undefined) {
|
||
that.$message.warning(result.data);
|
||
}
|
||
} else {
|
||
that.$message.warning(result.msg);
|
||
}
|
||
});
|
||
},
|
||
split: function (isHorizontal, $event) {
|
||
|
||
if (this.selectImageObj == null || this.selectImageObj.image == null ||
|
||
this.selectImageObj.image == undefined) {
|
||
this.eleMessage("请选择要切分的文件", "warning");
|
||
return;
|
||
}
|
||
this.clearDivListener();
|
||
this.addOptActive($event);
|
||
var that = this;
|
||
var fontSize = 18;
|
||
var zoom = this.canvas.getZoom();
|
||
fontSize = fontSize / zoom;
|
||
this.canvas.on("mouse:down", function (ev) {
|
||
var pointer = that.canvas.getPointer(ev);
|
||
if (isHorizontal) {
|
||
that.assistLine =
|
||
new fabric.Line([pointer.x, 0, pointer.x, that.image.height], {
|
||
fill: 'red',
|
||
stroke: 'red', //笔触颜色
|
||
strokeWidth: 2,//笔触宽度
|
||
selectable: false
|
||
});
|
||
that.assistText = new fabric.IText('双击进行切分', {
|
||
left: pointer.x + 10,
|
||
top: pointer.y,
|
||
fill: '#ff0000',
|
||
fontSize: fontSize,
|
||
selectable: false
|
||
});
|
||
that.canvas.add(that.assistText);
|
||
that.canvas.add(that.assistLine);
|
||
} else {
|
||
that.assistLine = new fabric.Line([0, pointer.y, that.image.width, pointer.y], {
|
||
fill: 'red',
|
||
stroke: 'red', //笔触颜色
|
||
strokeWidth: 2,//笔触宽度
|
||
selectable: false
|
||
});
|
||
that.canvas.add(that.assistLine);
|
||
that.assistText = new fabric.IText('双击进行切分', {
|
||
left: pointer.x + 10,
|
||
top: pointer.y + 10,
|
||
fill: '#ff0000',
|
||
fontSize: fontSize,
|
||
selectable: false
|
||
});
|
||
that.canvas.add(that.assistText);
|
||
}
|
||
that.canvas.on("mouse:move", function (event) {
|
||
that.canvas.off("mouse:down");
|
||
var movepointer = that.canvas.getPointer(event);
|
||
that.canvas.remove(that.assistLine);
|
||
that.canvas.remove(that.assistText);
|
||
if (isHorizontal) {
|
||
that.assistLine =
|
||
new fabric.Line([movepointer.x, 0, movepointer.x, that.image.height], {
|
||
fill: 'red',
|
||
stroke: 'red', //笔触颜色
|
||
strokeWidth: 2,//笔触宽度
|
||
selectable: false
|
||
});
|
||
that.assistText = new fabric.IText('双击进行切分', {
|
||
left: movepointer.x + 10,
|
||
top: movepointer.y,
|
||
fill: '#ff0000',
|
||
fontSize: fontSize,
|
||
selectable: false
|
||
});
|
||
that.canvas.add(that.assistText);
|
||
that.canvas.add(that.assistLine);
|
||
} else {
|
||
that.assistLine =
|
||
new fabric.Line([0, movepointer.y, that.image.width, movepointer.y], {
|
||
fill: 'red',
|
||
stroke: 'red', //笔触颜色
|
||
strokeWidth: 2,//笔触宽度
|
||
selectable: false
|
||
});
|
||
that.assistText = new fabric.IText('双击进行切分', {
|
||
left: movepointer.x + 10,
|
||
top: movepointer.y + 10,
|
||
fill: '#ff0000',
|
||
fontSize: fontSize,
|
||
selectable: false
|
||
});
|
||
that.canvas.add(that.assistText);
|
||
that.canvas.add(that.assistLine);
|
||
}
|
||
})
|
||
that.canvas.on("mouse:dblclick", function (ev) {
|
||
that.$confirm('文件拆分后不可撤销, 是否继续?', '拆分', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
callback: function (value) {
|
||
if (value == "confirm") {
|
||
that.clearDivListener();
|
||
var loading = this.eleLoadding();
|
||
|
||
that.WebScan.split(that.selectImageObj.image.imageName, isHorizontal, that.assistLine.x1,
|
||
that.assistLine.y1, that.assistLine.x2, that.assistLine.y2, function (result) {
|
||
loading.close();
|
||
// console.log('拆分结果：' + JSON.stringify(result))
|
||
if (result.code == 200) {
|
||
that.eleMessage("切分成功", "success");
|
||
that.selectImageObj.image.src = result.data.oneSrc;
|
||
|
||
let currentImage = {
|
||
"imageName": result.data.oneName,
|
||
"src": result.data.oneSrc
|
||
}
|
||
that.loadImage(currentImage)
|
||
that.getHistoryImages()
|
||
} else {
|
||
that.eleMessage(result.msg, "warning");
|
||
}
|
||
})
|
||
|
||
|
||
} else {
|
||
that.canvas.remove(that.assistLine);
|
||
that.canvas.remove(that.assistText);
|
||
}
|
||
}
|
||
});
|
||
})
|
||
})
|
||
},
|
||
mergeHorizontal: function (isHorizontal) {
|
||
if (this.selectManyImages == null || this.selectManyImages == undefined ||
|
||
this.selectManyImages.length <= 0) {
|
||
this.eleMessage("请选择要合并的图像", "warning");
|
||
return;
|
||
}
|
||
if (isHorizontal == null || isHorizontal == undefined) {
|
||
isHorizontal = true;
|
||
}
|
||
var that = this;
|
||
var sortList = that.selectManyImages.sort();
|
||
this.$confirm('此操作将合并文件，合并后不可恢复, 是否继续?', '合并', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
callback: function (value) {
|
||
if (value == 'confirm') {
|
||
var loading = that.eleLoadding();
|
||
that.WebScan.merge(isHorizontal, sortList, function (result) {
|
||
loading.close();
|
||
if (result.code == 200) {
|
||
var data = result.data;
|
||
var image = {
|
||
"src": data.src,
|
||
"imageName": data.imageName
|
||
}
|
||
that.getHistoryImages()
|
||
that.loadImage(image)
|
||
} else {
|
||
that.eleMessage(result.msg, "warning");
|
||
}
|
||
})
|
||
}
|
||
},
|
||
})
|
||
},
|
||
exchangeImage: function () {
|
||
if (this.selectManyImages == null || this.selectManyImages == undefined ||
|
||
this.selectManyImages.length <= 0) {
|
||
this.eleMessage("请选择要交换的图像！", "warning");
|
||
return;
|
||
}
|
||
|
||
if (this.selectManyImages.length != 2) {
|
||
this.eleMessage("请选择两张图像进行交换！", "warning");
|
||
return;
|
||
}
|
||
|
||
var that = this;
|
||
|
||
var loading = that.eleLoadding();
|
||
that.WebScan.exchangeImage(that.selectManyImages, function (result) {
|
||
loading.close();
|
||
if (result.code == 200) {
|
||
|
||
var sortList = that.selectManyImages.sort();
|
||
|
||
let first = that.urls[sortList[0]];
|
||
let last = that.urls[sortList[1]];
|
||
|
||
that.urls.splice(sortList[0], 1, last)
|
||
that.urls.splice(sortList[1], 1, first)
|
||
|
||
|
||
} else {
|
||
that.eleMessage(result.msg, "warning");
|
||
}
|
||
})
|
||
|
||
},
|
||
bookSort: function () {//是否是按照书籍类型来排序
|
||
if (this.urls == null || this.urls.length <= 0) {
|
||
this.eleMessage("该批次不包含图像", "warning");
|
||
return;
|
||
}
|
||
|
||
let that = this;
|
||
let loading = that.eleLoadding();
|
||
|
||
that.WebScan.bookSort(function (result) {
|
||
loading.close();
|
||
if (result.code == 200) {
|
||
|
||
if (result.data != null && result.data.length > 0) {
|
||
that.urls = result.data;
|
||
}
|
||
|
||
} else {
|
||
that.eleMessage(result.msg, "warning");
|
||
}
|
||
})
|
||
},
|
||
}
|
||
})
|