mirror of http://192.168.10.4:8099/sane/dpkg.git
2428 lines
97 KiB
JavaScript
Executable File
2428 lines
97 KiB
JavaScript
Executable File
new Vue({
|
||
el: "#container",
|
||
data: {
|
||
canvas: null,
|
||
image: null,//左侧选中的图像
|
||
scale: 1,
|
||
angle: 0,
|
||
totalAngle: 0,
|
||
rectificationDialog: false,
|
||
repSliderValue: 0,
|
||
selectImageObj: {
|
||
// "image": image,
|
||
// "index": index,
|
||
//"thumbnail":thumbnail
|
||
index: -1
|
||
},
|
||
redoStack: [],
|
||
undoStack: [],
|
||
startP: null,
|
||
assistLine: null,
|
||
assistText: null,
|
||
markText: null,
|
||
selectManyImages: [],
|
||
|
||
urls: [/*{
|
||
path: 'fake://fake.jpg',
|
||
base64: '',
|
||
thumbnail:thumbnail
|
||
}*/],
|
||
licence: 'gE/rN4vZATMg49y/OCFlZA==',//licence
|
||
serverIP: '127.0.0.1',
|
||
serverPort: '38999',
|
||
debugMode: false,//是否是调试模式
|
||
fullscreenLoading: false,
|
||
jsonCommadnHolder: "请输入待发送json命令\n例如{\"func\":\"start_scan\",\"iden\":\"licence\"}",
|
||
picLocalPath: '',
|
||
socketCommand: '',//当前输入的socket命令
|
||
socketMsg: '',//收到的socket信息
|
||
connectEnable: false,//是否可以点击‘连接’按钮
|
||
originJson: '',//输入的待格式化json
|
||
formatedJson: '',//格式化后的json
|
||
showBigImageDialog: false,//是否显示大图
|
||
selectBigImage: '',//当前选中的大图base64
|
||
scanMode: 'normal',//当前扫描模式 normal:正常往后添加 insert:在指定位置前后插入 cover:从指定位置开始往后覆盖或者添加
|
||
curInsertIndex: -1,//当前需要插入的位置
|
||
curCoverIndex: -1,//当前需要覆盖扫描的位置
|
||
needCoverCount: -1,//当前需要覆盖扫描的数量
|
||
isSetup: false,//是否显示参数设置框
|
||
activeName: '1',//设置框的tab位
|
||
devices: [],//获取到的设备列表
|
||
currDevice: '',//当前选中的设备
|
||
deviceOpened: false,//是否已经打开了设备
|
||
deviceInited: false,//是否已经初始化了设备
|
||
batchIdList: [],//批次列表
|
||
showBatchList: true,//是否显示批次列表选择界面
|
||
showExportType: true,//是否显示导出文件列表选择界面
|
||
currentBatch: '',//当前是哪个批次
|
||
isScanning: false,//是否正在扫描中
|
||
bindFolderPath: '',//绑定的文件夹
|
||
showWaterMark: false,//是否显示水印配置项
|
||
showWaterMarkPosition: false,//是否显示水印xy位置
|
||
showBatchMarkConfigure: false,//是否显示批量添加水印框
|
||
scanParams: {//扫描参数
|
||
color_mode: 'color',//"color","gray","binary","auto"
|
||
page_mode: 'duplex',//"simplex","duplex","filter_blank_general","filter_blank_invoice","fold_in_half"
|
||
resolution: 200,//dpi 100,150,200,240,300
|
||
brightness: 100,//亮度 1~255
|
||
contrast: 4,//对比度 1~7
|
||
gamma: 1.00,//伽马值 0.01~5.00
|
||
paper_size: 'a4',//纸张尺寸 "a3","a4","a4_horz","auto"
|
||
paper_cut_enabled: false,//是否裁剪
|
||
paper_cut_left: 0.0,//单位毫米
|
||
paper_cut_top: 0.0,//
|
||
paper_cut_right: 210.0,//
|
||
paper_cut_bottom: 297.0,//
|
||
auto_crop: false//是否纠偏
|
||
},
|
||
//扫描参数的范围,后面根据实际获取到的覆盖更新
|
||
scanParamsRange: {
|
||
color_mode_list: ["color", "gray", "binary", "auto"],
|
||
page_mode_list: ["simplex", "duplex", "filter_blank_general", "filter_blank_invoice", "fold_in_half"],
|
||
resolution_list: [100, 150, 200, 240, 300],
|
||
brightness_min: 1,
|
||
brightness_max: 255,
|
||
contrast_min: 1,
|
||
contrast_max: 7,
|
||
gamma_min: 0.01,
|
||
gamma_max: 5.00,
|
||
paper_size_list: ["a3", "a4", "a4_horz", "auto"],
|
||
paper_size_width: 210.0,
|
||
paper_size_height: 297.0
|
||
},
|
||
//全局配置
|
||
globalConfig: {
|
||
file_save_path: 'C:\\', // 默认是文档目录
|
||
file_name_prefix: 'Huago', // 文件名前缀
|
||
file_name_mode: 'date_time', // 可以是date_time、random
|
||
image_format: 'jpg', // 格式,支持jpg、bmp、png、tif、pdf、ofd、ocr-pdf和ocr-ofd
|
||
image_jpeg_quality: 80, // jpg质量,0-100
|
||
image_tiff_compression: 'lzw', // 可以为none、 lzw和jpeg
|
||
image_tiff_jpeg_quality: 80, // tiff-jpeg质量,0-100
|
||
},
|
||
//水印信息
|
||
waterMarkInfo: {
|
||
text: '0001',
|
||
text_color: '#000000',
|
||
text_opacity: 100, // 不透明度
|
||
text_pos: 'left', // 可以是left、right、top、bottom、left_top、right_top、left_bottom、right_bottom、center和location
|
||
margin_left: 10, // 左边距
|
||
margin_top: 10, // 上边距
|
||
margin_right: 10, // 右边距
|
||
margin_bottom: 10, // 下边距
|
||
location_x: 100, // x坐标
|
||
location_y: 100, // y 坐标
|
||
font_name: '宋体', // 字体名
|
||
font_size: 20, // 字号
|
||
font_bold: false, // 粗体
|
||
font_underline: false, // 下划线
|
||
font_italic: false, // 斜体
|
||
font_strikeout: false, // 删除线
|
||
},
|
||
waterMarkPositionList: ['底部居中', '顶部居中', '居中', '左侧居中', '右侧居中', '左上角', '左下角', '右上角', '右下角', '绝对位置XY'],
|
||
waterMarkPositionSignList: ['bottom', 'top', 'center', 'left', 'right', 'left_top', 'left_bottom', 'right_top', 'right_bottom', 'location'],
|
||
markPosition: 'bottom',
|
||
markAbsoluteX: 0,//绝对位置X
|
||
markAbsoluteY: 0,//绝对位置Y
|
||
markMarginTop: 0,
|
||
markMarginLeft: 0,
|
||
markMarginRight: 0,
|
||
markMarginBottom: 0,
|
||
markInsertRange: [0, 0],
|
||
markFontNameList: ['宋体'],
|
||
markFontSizeList: [],
|
||
markFontName: '宋体',
|
||
markFontSize: 20,
|
||
markFontBold: false,
|
||
markFontUnderline: false,
|
||
markFontItalic: false,
|
||
markFontStrikeout: false,
|
||
waterMarkText: '',
|
||
markFontColor: '#000000',
|
||
markPredefineColors: [
|
||
'#000000',
|
||
'#ffffff',
|
||
'#ff4500',
|
||
'#ff8c00',
|
||
'#ffd700',
|
||
'#90ee90',
|
||
'#00ced1',
|
||
'#1e90ff',
|
||
'#c71585',
|
||
],
|
||
markPositionTipX: 0,//提示X
|
||
markPositionTipY: 0,//提示Y
|
||
},
|
||
created: function () {
|
||
window.eleLoadding = this.eleLoadding;
|
||
window.eleAlert = this.eleMessage;
|
||
window.scanCallBack = this.scanCallBack;
|
||
window.setupWindowCallBack = this.setupWindowCallBack
|
||
window.socketCallBack = this.onSocketCallBack
|
||
window.onbeforeunload = this.releaseService
|
||
},
|
||
mounted: function () {
|
||
let canvasContainer = $("#canvas-container")
|
||
let width = canvasContainer.width();
|
||
let height = canvasContainer.height();
|
||
console.log('canvas width:' + width + ' height:' + height)
|
||
let canvas = new fabric.Canvas(
|
||
'imageCanvas',
|
||
{
|
||
allowTouchScrolling: true,
|
||
centeredRotation: true,
|
||
centeredScaling: true,
|
||
defaultCursor: 'default',
|
||
hoverCursor: 'default',
|
||
backgroundColor: "#ffffff",
|
||
backgroundVpt: true,
|
||
width: width,
|
||
height: height
|
||
}
|
||
);
|
||
this.canvas = canvas;
|
||
|
||
this.markFontSizeList.length = 0
|
||
//添加可选字体大小
|
||
for (let i = 11; i < 51; i++) {
|
||
this.markFontSizeList.push(i)
|
||
}
|
||
|
||
this.initWebSocket()
|
||
},
|
||
methods: {
|
||
initWebSocket: function () {
|
||
this.WebScanController = new WebScanController({
|
||
wsUrl: 'ws://' + this.serverIP + ':' + this.serverPort + '/',
|
||
wslicence: this.licence
|
||
});
|
||
this.WebScanController.initSocketIo(this.onSocketCallBack)
|
||
},
|
||
onSocketCallBack: function (info) {
|
||
let msg
|
||
switch (info.code) {
|
||
case SOCKET_CONNECTED://连接成功
|
||
msg = 'socket connected'
|
||
this.connectEnable = false
|
||
this.initData()
|
||
break
|
||
case SOCKET_DISCONNECTED://断开连接
|
||
msg = 'socket disconnect !!!'
|
||
this.connectEnable = true
|
||
break
|
||
case SOCKET_EVENT://其他事件
|
||
msg = 'socket received: ' + info.data
|
||
this.dispatchEvent(JSON.parse(info.data))
|
||
break
|
||
}
|
||
this.appendLog(msg)
|
||
console.log(msg)
|
||
},
|
||
dispatchEvent: function (info) {
|
||
if (info.func) {
|
||
if (info.ret != null && info.ret != undefined) {
|
||
if (info.ret == 0) {//返回成功
|
||
let funcName = this.WebScanController.getCallBack(info.func)
|
||
if (funcName) {
|
||
funcName(info)
|
||
} else {
|
||
this.commonDispatch(info)
|
||
}
|
||
} else {//统一异常处理 弹个窗
|
||
this.eleUnloadding()
|
||
this.eleMessage(info.err_info ? info.err_info : '未知异常', 'error')
|
||
if (info.func != null && info.func != undefined) {
|
||
if (info.func === 'image_add_watermark') {//特殊情况单独处理
|
||
//添加水印失败了
|
||
// this.reLoadImageList()
|
||
}
|
||
}
|
||
}
|
||
} else {
|
||
this.commonDispatch(info)
|
||
}
|
||
}
|
||
},
|
||
commonDispatch: function (info) {//较通用事件处理
|
||
this.eleUnloadding()
|
||
console.log('commonDispatch:', JSON.stringify(info))
|
||
if (info) {
|
||
switch (info.func) {
|
||
case "device_arrive"://设备装载
|
||
this.eleMessage("设备已装载")
|
||
this.getDeviceNameList()
|
||
break
|
||
case "device_remove"://设备卸载
|
||
this.eleMessage("设备已移除!")
|
||
this.deinitDevices()
|
||
this.deviceOpened = false
|
||
this.deviceInited = false
|
||
this.devices.length = 0
|
||
this.currDevice = null
|
||
break
|
||
case "scan_begin"://开始扫描信号
|
||
this.isScanning = true
|
||
this.eleMessage("开始扫描")
|
||
this.eleLoadding()
|
||
break
|
||
case "scan_end"://扫描结束
|
||
this.isScanning = false
|
||
this.clearCanvasData()
|
||
this.eleMessage("扫描结束")
|
||
clearInterval(window.loopinterval)
|
||
this.eleUnloadding()
|
||
break
|
||
case "scan_info":
|
||
// {
|
||
// “is_error”:false,// 是否是错误消息
|
||
// “info”:”start scanning” // 消息内容
|
||
// }
|
||
this.eleMessage(info.info, info.is_error ? 'error' : 'warning')
|
||
break
|
||
case "scan_image"://图片回调
|
||
this.appendLog('图片回调:' + info.image_path)
|
||
console.log('图片回调:' + info.image_path)
|
||
let that = this
|
||
|
||
if (this.scanMode == 'insert') {//是插入扫描
|
||
this.curCoverIndex = -1
|
||
|
||
//找到文件位置,插入元素
|
||
if (this.curInsertIndex != -1) {
|
||
|
||
} else {
|
||
this.curInsertIndex = this.selectImageObj.index
|
||
}
|
||
|
||
console.log('插入扫描:待插入index:' + this.curInsertIndex + " path:" + info.image_path)
|
||
this.WebScanController.insertLocalImage(info.image_path, this.curInsertIndex, function (insertInfo) {
|
||
console.log('插入扫描:插入index' + that.curInsertIndex)
|
||
|
||
that.urls.splice(that.curInsertIndex, 0, {
|
||
path: info.image_path,
|
||
thumbnail: info.image_base64,
|
||
base64: info.image_base64
|
||
});
|
||
that.curInsertIndex++
|
||
that.$forceUpdate()
|
||
})
|
||
|
||
|
||
} else if (this.scanMode == 'cover') {//是覆盖扫描
|
||
this.curInsertIndex = -1
|
||
|
||
if (this.curCoverIndex != -1) {
|
||
|
||
} else {
|
||
this.curCoverIndex = this.selectImageObj.index
|
||
this.needCoverCount = this.urls.length - this.curCoverIndex
|
||
console.log('当前需要覆盖的起始位index' + this.curCoverIndex + ' 总长度位置:' + (this.urls.length - 1))
|
||
console.log('需要覆盖的数量:' + this.needCoverCount)
|
||
}
|
||
|
||
if (this.needCoverCount > 0) {//还在覆盖范围内,直接覆盖掉
|
||
this.WebScanController.modifyImage(this.curCoverIndex, info.image_base64, function (modifyInfo) {
|
||
|
||
console.log('覆盖扫描:修改成功 index:' + that.curCoverIndex)
|
||
console.log('覆盖前:index==' + that.curCoverIndex + ' path:' + that.urls[that.curCoverIndex].path)
|
||
|
||
that.urls[that.curCoverIndex] = {
|
||
base64: info.image_base64,
|
||
thumbnail: info.image_base64,
|
||
path: info.image_path
|
||
}
|
||
console.log('覆盖后:index==' + that.curCoverIndex + ' path:' + that.urls[that.curCoverIndex].path)
|
||
|
||
that.curCoverIndex++
|
||
that.needCoverCount--
|
||
|
||
that.$forceUpdate()
|
||
})
|
||
} else {//之后都是新增的往后添加了
|
||
this.WebScanController.insertLocalImage(info.image_path, this.urls.length, function (result) {
|
||
console.log('覆盖扫描:插入成功 index:' + that.urls.length)
|
||
that.urls.push({
|
||
path: info.image_path,
|
||
thumbnail: info.image_base64,
|
||
base64: info.image_base64
|
||
})
|
||
that.$forceUpdate()
|
||
|
||
that.$nextTick(function () {
|
||
if (that.$refs.imageArea) {
|
||
that.$refs.imageArea.scrollTop = that.$refs.imageArea.scrollHeight
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
} else {//正常按顺序
|
||
this.curInsertIndex = -1
|
||
this.curCoverIndex = -1
|
||
|
||
let that = this;
|
||
|
||
this.WebScanController.insertLocalImage(info.image_path, this.urls.length, function (result) {
|
||
console.log('正常扫描:插入成功 index:' + that.urls.length)
|
||
that.urls.push({
|
||
path: info.image_path,
|
||
thumbnail: info.image_base64,
|
||
base64: info.image_base64
|
||
})
|
||
that.$nextTick(function () {
|
||
if (that.$refs.imageArea) {
|
||
that.$refs.imageArea.scrollTop = that.$refs.imageArea.scrollHeight
|
||
}
|
||
})
|
||
})
|
||
|
||
}
|
||
break
|
||
}
|
||
}
|
||
},
|
||
//一些初始化操作
|
||
initData: function () {
|
||
let that = this
|
||
// this.initDevice()
|
||
this.getGlobalConfig()
|
||
this.getBatchList(function () {
|
||
that.changeBatch(that.batchIdList.slice(-1)[0])
|
||
})
|
||
},
|
||
//关闭服务
|
||
releaseService: function () {
|
||
this.deinitDevices()
|
||
// this.stopBindFolder()
|
||
if (this.WebScanController) {
|
||
this.WebScanController.disconnect()
|
||
}
|
||
},
|
||
/*******************************************扫描仪控制***************************************************************/
|
||
//获取全局参数
|
||
getGlobalConfig: function () {
|
||
let that = this
|
||
this.WebScanController.getGlobalConfig(function (info) {
|
||
console.log('getGlobalConfig :' + info)
|
||
that.globalConfig = info
|
||
let pre = info.file_save_path
|
||
if (pre.endsWith("\\")) {
|
||
that.bindFolderPath = pre + 'auto'
|
||
} else {
|
||
that.bindFolderPath = pre + '\\auto'
|
||
}
|
||
that.bindFolder()
|
||
})
|
||
},
|
||
//设置全局参数
|
||
setGlobalConfig: function () {
|
||
let that = this
|
||
this.WebScanController.setGlobalConfig(this.globalConfig, function (info) {
|
||
console.log('setGlobalConfig :' + info)
|
||
that.eleMessage("设置全局配置成功")
|
||
})
|
||
},
|
||
//初始化设备
|
||
initDevice: function (succcallBack) {
|
||
let that = this
|
||
this.WebScanController.initDevice(function (info) {
|
||
console.log('init devices :' + info)
|
||
that.deviceInited = true
|
||
if (succcallBack != null) {
|
||
succcallBack()
|
||
}
|
||
})
|
||
},
|
||
//反初始化设备(需初始化后调用)
|
||
deinitDevices: function () {
|
||
if (this.deviceInited == false) {
|
||
return
|
||
}
|
||
let that = this
|
||
this.WebScanController.deinitDevices(function (info) {
|
||
console.log('deinit Devices :' + info)
|
||
that.deviceInited = false
|
||
that.deviceInited = false
|
||
})
|
||
},
|
||
//获取设备列表
|
||
getDeviceNameList: function () {
|
||
let that = this
|
||
this.WebScanController.getDeviceNameList(function (info) {
|
||
console.log('getDeviceNameList :' + info)
|
||
if (info.device_name_list) {//反初始化成功
|
||
for (let i = 0; i < info.device_name_list.length; i++) {
|
||
console.log('getDeviceNameList index:' + i + " item:" + info.device_name_list[i])
|
||
}
|
||
that.devices = info.device_name_list
|
||
}
|
||
})
|
||
},
|
||
//打开设备
|
||
openDevice: function (deviceName) {
|
||
let that = this
|
||
this.WebScanController.openDevice(deviceName, function (info) {
|
||
console.log('open devices :' + info)
|
||
that.deviceOpened = true
|
||
that.eleLoadding()
|
||
that.getScanParams()
|
||
})
|
||
},
|
||
//关闭设备
|
||
closeDevice: function () {
|
||
if (this.deviceOpened == false) {
|
||
return
|
||
}
|
||
let that = this
|
||
this.WebScanController.closeDevice(function (info) {
|
||
console.log('close devices :' + info)
|
||
that.deviceOpened = false
|
||
})
|
||
},
|
||
//设置扫描参数
|
||
setScanParams: function () {
|
||
let that = this
|
||
|
||
|
||
let ori = this.scanParams
|
||
let result = new Array()
|
||
for (let i = 0; i < ori.length; i++) {
|
||
let group = ori[i].group_param
|
||
for (let j = 0; j < group.length; j++) {
|
||
result.push({
|
||
name: group[j].name,
|
||
value: group[j].value
|
||
})
|
||
}
|
||
}
|
||
this.WebScanController.setScanParams(result, function (info) {
|
||
console.log('setScanParams :' + info)
|
||
that.eleMessage("设置扫描参数成功")
|
||
})
|
||
},
|
||
//获取扫描参数
|
||
getScanParams: function () {
|
||
let that = this
|
||
this.WebScanController.getScanParams(function (info) {
|
||
that.eleUnloadding()
|
||
console.log('获取到的扫描参数 :' + JSON.stringify(info))
|
||
/* let par = info.device_param
|
||
let result = new Array()
|
||
|
||
result.push({
|
||
group_name: '一个团',
|
||
group_param: par
|
||
})
|
||
that.scanParamsRange = result*/
|
||
that.scanParamsRange = info.device_param
|
||
that.parameterCoerceIn()
|
||
})
|
||
},
|
||
//重设扫描参数
|
||
resetScanParams: function () {
|
||
let that = this
|
||
this.WebScanController.resetScanParams(function (info) {
|
||
console.log('重置参数成功!')
|
||
that.getScanParams()
|
||
that.$alert('扫描参数已重置!', '提示', {
|
||
confirmButtonText: '确定'
|
||
});
|
||
|
||
})
|
||
},
|
||
// setScanParams: function () {
|
||
// let that = this
|
||
// this.WebScanController.setScanParams(this.scanParams, function (info) {
|
||
// console.log('setScanParams :' + info)
|
||
// that.eleMessage("设置扫描参数成功")
|
||
// })
|
||
// },
|
||
//获取扫描参数
|
||
// getScanParams: function () {
|
||
// let that = this
|
||
// this.WebScanController.getScanParams(function (info) {
|
||
// that.eleUnloadding()
|
||
// console.log('获取到的扫描参数 :' + JSON.stringify(info))
|
||
// that.scanParamsRange = info
|
||
// that.parameterCoerceIn()
|
||
// })
|
||
// },
|
||
|
||
//获取当前设备名称
|
||
getCurrDeviceName: function () {
|
||
this.WebScanController.getCurrDeviceName(function (info) {
|
||
console.log('getCurrDeviceName :' + info)
|
||
})
|
||
},
|
||
//绑定文件夹,以使对图片的插入、移动、删除等,文件名能正确按顺序命名
|
||
bindFolder: function () {
|
||
if (this.bindFolderPath == null || this.bindFolderPath.length == 0) {
|
||
return
|
||
}
|
||
console.log('start bind folder :' + this.bindFolderPath)
|
||
this.WebScanController.bindFolder(this.bindFolderPath, function (info) {
|
||
console.log('绑定文件夹成功!')
|
||
})
|
||
},
|
||
//停止绑定文件夹
|
||
stopBindFolder: function () {
|
||
this.WebScanController.stopBindFolder(function (info) {
|
||
console.log('解绑文件夹成功!')
|
||
})
|
||
},
|
||
//清理全局保存文件
|
||
clearGlobalFileSavePath: function () {
|
||
let that = this
|
||
this.$confirm('全局扫描文件删除后无法恢复, 是否继续?', '清理全局保存文件', {
|
||
confirmButtonText: '继续',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
callback: function (value) {
|
||
if (value == "confirm") {
|
||
that.eleLoadding();
|
||
that.WebScanController.clearGlobalFileSavePath(function (info) {
|
||
that.eleUnloadding()
|
||
that.eleMessage('清理全局保存文件成功')
|
||
console.log('清理全局保存文件成功')
|
||
})
|
||
}
|
||
}
|
||
});
|
||
},
|
||
//开始扫描
|
||
startScan: function () {
|
||
if (this.isScanning) {
|
||
this.eleMessage('请先等待扫描结束!', 'warning')
|
||
return;
|
||
}
|
||
|
||
this.scanMode = 'normal'
|
||
this.WebScanController.startScan(function (info) {
|
||
console.log('startScan :' + info)
|
||
})
|
||
},
|
||
//插入扫描
|
||
insertScan: function () {
|
||
let that = this
|
||
if (this.selectImageObj == null || this.selectImageObj.image == null ||
|
||
this.selectImageObj.image.base64 == undefined) {
|
||
this.eleMessage("请选择插入图像", "warning");
|
||
return;
|
||
}
|
||
if (this.isScanning) {
|
||
this.eleMessage('请先等待扫描结束!', 'warning')
|
||
return;
|
||
}
|
||
this.WebScanController.startScan(function (info) {
|
||
console.log('插入扫描')
|
||
that.scanMode = 'insert'
|
||
})
|
||
},
|
||
//覆盖扫描
|
||
coverScan: function () {
|
||
|
||
if (this.selectImageObj == null || this.selectImageObj.image == null ||
|
||
this.selectImageObj.image.base64 == undefined) {
|
||
this.eleMessage("请选择插入图像", "warning");
|
||
return;
|
||
}
|
||
if (this.isScanning) {
|
||
this.eleMessage('请先等待扫描结束!', 'warning')
|
||
return;
|
||
}
|
||
let that = this
|
||
|
||
this.curCoverIndex = -1
|
||
this.WebScanController.startScan(function (info) {
|
||
console.log('覆盖扫描')
|
||
that.scanMode = 'cover'
|
||
})
|
||
},
|
||
//停止扫描
|
||
stopScan: function () {
|
||
this.WebScanController.stopScan(function (info) {
|
||
console.log('stopScan :' + info)
|
||
})
|
||
},
|
||
//保存扫描仪参数
|
||
saveParams: function () {
|
||
this.isSetup = false
|
||
this.setGlobalConfig()
|
||
this.setScanParams()
|
||
this.bindFolder()
|
||
},
|
||
onDeviceChanged: function (deviceName) {
|
||
this.closeDevice()
|
||
this.openDevice(deviceName)
|
||
},
|
||
openDeviceSetting: function () {
|
||
if (this.deviceInited == true) {
|
||
this.isSetup = true
|
||
} else {
|
||
let that = this
|
||
this.initDevice(function () {
|
||
that.isSetup = true
|
||
})
|
||
}
|
||
},
|
||
/*******************************************文件管理***************************************************************/
|
||
//获取最后批次的内容
|
||
getBatchList: function (succeccCallBack) {
|
||
let that = this
|
||
this.WebScanController.getBatchIdList(function (info) {
|
||
console.log('批次列表:' + JSON.stringify(info))
|
||
that.batchIdList.length = 0
|
||
for (let i = 0; i < info.batch_id_list.length; i++) {
|
||
that.batchIdList.push(info.batch_id_list[i])
|
||
}
|
||
succeccCallBack()
|
||
})
|
||
},
|
||
//删除批次
|
||
deleteBatch: function (batchId, index) {
|
||
if (!this.batchIdList.includes(batchId)) {
|
||
this.eleMessage('该批次[' + batchId + ']不存在!', 'warning')
|
||
return
|
||
}
|
||
console.log('当前批次号:' + this.currentBatch)
|
||
console.log('要删除的批次号:' + batchId, '是否是当前批次:' + (this.currentBatch === batchId))
|
||
let that = this
|
||
this.WebScanController.deleteBatch(batchId, function (info) {
|
||
console.log('删除批次成功 batchId:' + batchId + " result:" + JSON.stringify(info))
|
||
|
||
that.batchIdList.splice(index, 1)
|
||
|
||
if (that.currentBatch === batchId) {//删除的就是当前批次
|
||
let lastBatchId = that.batchIdList.slice(-1)[0]
|
||
console.log('删除的当前批次,那么重新打开最新的批次:' + lastBatchId)
|
||
that.changeBatch(lastBatchId)
|
||
}
|
||
})
|
||
},
|
||
//创建新的批次
|
||
createNewBatch: function () {
|
||
let that = this
|
||
this.$prompt('请输入批次号', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
inputValidator: function (value) {
|
||
if (value == null || value == undefined || value.length == 0 || new RegExp("^[ ]+$").test(value)) {
|
||
that.eleMessage('批次号不能为空')
|
||
return false
|
||
} else {
|
||
return true
|
||
}
|
||
}
|
||
}).then(({value}) => {
|
||
that.eleLoadding()
|
||
let id = value.trim()
|
||
console.log('id:' + id)
|
||
that.WebScanController.createNewBatch(id, function (info) {
|
||
that.eleUnloadding()
|
||
console.log('创建新批次 batchId:' + id + " " + JSON.stringify(info))
|
||
that.showBatchList = false
|
||
that.urls.length = 0
|
||
that.batchIdList.push(id)
|
||
that.currentBatch = id
|
||
})
|
||
}).catch(() => {
|
||
|
||
});
|
||
},
|
||
//切换批次
|
||
changeBatch: function (batchId) {
|
||
let that = this
|
||
console.log('切换批次:' + batchId)
|
||
this.showBatchList = false
|
||
this.image = null
|
||
this.undoStack.length = 0;
|
||
this.redoStack.length = 0;
|
||
|
||
this.eleLoadding()
|
||
this.WebScanController.openBatch(batchId, function (info) {
|
||
console.log('切换批次:' + JSON.stringify(info))
|
||
that.urls.length = 0//先清空一下
|
||
that.currentBatch = batchId
|
||
//重新加载
|
||
that.reLoadImageList()
|
||
})
|
||
},
|
||
//获取当前批次的图像列表
|
||
reLoadImageList: function () {
|
||
let that = this
|
||
this.eleLoadding()
|
||
this.clearCanvasData()
|
||
|
||
/* this.WebScanController.getImageCount(function (info) {
|
||
that.eleUnloadding()
|
||
|
||
console.log('当前批次图片数量为:' + JSON.stringify(info))
|
||
that.urls = new Array(info.image_count).fill('')
|
||
|
||
for (let i = 0; i < that.urls.length; i++) {
|
||
that.WebScanController.loadImage(i, function (imageInfo) {
|
||
console.log('iden===' + imageInfo.iden)
|
||
that.urls[imageInfo.iden] = {
|
||
path: '',
|
||
base64: imageInfo.image_base64
|
||
}
|
||
that.$forceUpdate()
|
||
console.log('加载批次图片 index:' + i + " info:" + JSON.stringify(imageInfo))
|
||
console.log('urls结果:' + that.urls)
|
||
})
|
||
|
||
}
|
||
})*/
|
||
|
||
//获取缩略图
|
||
this.WebScanController.getImageThumbnailList(function (info) {
|
||
that.eleUnloadding()
|
||
// “image_thumbnail_list”:[{“image_tag”:”001”, “image_base64”:”xxx”}]
|
||
console.log('缩略图个数:' + info.image_thumbnail_list.length)
|
||
that.urls.length = 0
|
||
|
||
for (let i = 0; i < info.image_thumbnail_list.length; i++) {
|
||
that.urls.push({
|
||
path: '',
|
||
base64: '',
|
||
thumbnail: info.image_thumbnail_list[i].image_base64//缩略图
|
||
})
|
||
}
|
||
that.$forceUpdate()
|
||
})
|
||
},
|
||
modifyBatchId: function (originBatchId, index) {
|
||
let that = this
|
||
this.$prompt('请输入新的批次号', '更改批次号', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
inputValidator: function (value) {
|
||
if (value == null || value == undefined || value.length == 0 || new RegExp("^[ ]+$").test(value)) {
|
||
that.eleMessage('批次号不能为空')
|
||
return false
|
||
} else {
|
||
return true
|
||
}
|
||
}
|
||
}).then(({value}) => {
|
||
that.eleLoadding()
|
||
let id = value.trim()
|
||
that.WebScanController.modifyBatchId(originBatchId, id, function (info) {
|
||
that.eleUnloadding()
|
||
console.log('修改批次号 newbatchId:' + id + " originBatchId:" + originBatchId + " " + JSON.stringify(info))
|
||
that.showBatchList = false
|
||
that.batchIdList[index] = id
|
||
if (that.currentBatch == originBatchId) {
|
||
that.currentBatch = id
|
||
}
|
||
that.eleMessage('修改批次号成功!')
|
||
})
|
||
});
|
||
},
|
||
//清空批次图像
|
||
clearBatch: function () {
|
||
let that = this
|
||
this.WebScanController.clearImageList(function (info) {
|
||
that.eleMessage('清空图像列表成功!')
|
||
console.log('清空图像列表:' + JSON.stringify(info))
|
||
|
||
that.urls.length = 0
|
||
that.image = null
|
||
that.$forceUpdate()
|
||
})
|
||
},
|
||
deleteSelectedImage: function () {
|
||
if (this.selectImageObj == null || this.selectImageObj.image == null ||
|
||
this.selectImageObj.image.base64 == undefined) {
|
||
this.eleMessage("请至少选择一张需要删除的图像", "warning");
|
||
return;
|
||
}
|
||
|
||
let deleteList = this.selectManyImages
|
||
console.log('删除列表:' + deleteList)
|
||
let that = this
|
||
this.WebScanController.deleteImage(deleteList, function (info) {
|
||
that.image = null
|
||
that.selectManyImages.sort(function (a, b) {
|
||
return a - b
|
||
})
|
||
|
||
for (let i = that.selectManyImages.length - 1; i >= 0; i--) {
|
||
that.urls.splice(that.selectManyImages[i], 1)
|
||
}
|
||
|
||
that.selectImageObj = {index: -1}
|
||
that.selectManyImages = []
|
||
that.image = null
|
||
that.$forceUpdate()
|
||
})
|
||
},
|
||
//图片书籍排序
|
||
bookSort: function () {
|
||
if (this.urls == null || this.urls.length <= 0) {
|
||
this.eleMessage("该批次不包含图像", "warning");
|
||
return;
|
||
}
|
||
|
||
let that = this;
|
||
|
||
this.$confirm('图片书籍排序后不可撤销, 是否继续?', '书籍排序', {
|
||
confirmButtonText: '继续',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
callback: function (value) {
|
||
if (value == "confirm") {
|
||
that.eleLoadding();
|
||
that.WebScanController.imageBookSort(function (info) {
|
||
that.eleUnloadding()
|
||
console.log('书籍排序:' + JSON.stringify(info))
|
||
that.reLoadImageList()
|
||
})
|
||
}
|
||
}
|
||
});
|
||
},
|
||
//合并图像
|
||
mergeHorizontal: function (isHorizontal) {
|
||
if (this.selectManyImages == null || this.selectManyImages.length < 2) {
|
||
this.eleMessage('请至少选择两张图像进行合并')
|
||
return
|
||
}
|
||
|
||
let that = this
|
||
this.WebScanController.mergeImage(this.selectManyImages, isHorizontal ? 'horz' : 'vert', 'center', true, function (mergeInfo) {
|
||
console.log('合并图像:' + JSON.stringify(mergeInfo))
|
||
// that.reLoadImageList()
|
||
|
||
that.WebScanController.deleteImage(that.selectManyImages, function (deleteInfo) {
|
||
|
||
console.log('合并图像:删除原图成功!')
|
||
|
||
that.selectManyImages.sort(function (a, b) {
|
||
return a - b
|
||
})
|
||
|
||
for (let i = that.selectManyImages.length - 1; i >= 0; i--) {
|
||
that.urls.splice(that.selectManyImages[i], 1)
|
||
}
|
||
|
||
that.WebScanController.insertImage(mergeInfo.image_base64, that.urls.length, function (insertInfo) {
|
||
console.log('合并图像:插入图片成功')
|
||
|
||
that.urls.push({
|
||
path: mergeInfo.image_path,
|
||
thumbnail: mergeInfo.image_base64,
|
||
base64: mergeInfo.image_base64
|
||
})
|
||
})
|
||
})
|
||
})
|
||
},
|
||
//图片互换
|
||
exchangeImage: function () {
|
||
|
||
if (this.selectManyImages == null || this.selectManyImages.length != 2) {
|
||
this.eleMessage('请选择两张图像进行交换!')
|
||
return
|
||
}
|
||
|
||
let firstIndex = this.selectManyImages[0]
|
||
let secondIndex = this.selectManyImages[1]
|
||
|
||
let that = this
|
||
this.WebScanController.exchangeImage(firstIndex, secondIndex, function (info) {
|
||
console.log('图片交换成功!' + JSON.stringify(info))
|
||
|
||
that.clearCanvasData()
|
||
|
||
let firstData = that.urls[firstIndex]
|
||
let secondData = that.urls[secondIndex]
|
||
|
||
that.urls[firstIndex] = secondData
|
||
that.urls[secondIndex] = firstData
|
||
|
||
that.$forceUpdate()
|
||
})
|
||
|
||
},
|
||
//导出全部图片为指定文件类型
|
||
exportFile: function (fileType) {
|
||
if (this.urls.length == 0) {
|
||
this.eleMessage('请先扫描!', 'warning')
|
||
return
|
||
}
|
||
|
||
this.eleLoadding()
|
||
let imageIndexList = []
|
||
|
||
for (let i = 0; i < this.urls.length; i++) {
|
||
imageIndexList.push(i)
|
||
}
|
||
console.log('待导出文件index:' + imageIndexList)
|
||
let that = this
|
||
|
||
if (fileType === 'zip') {
|
||
this.WebScanController.makeZipFile(imageIndexList, function (info) {
|
||
console.log('导出zip压缩包成功:' + JSON.stringify(info))
|
||
that.eleUnloadding()
|
||
that.downloadBase64File(info.zip_base64, that.currentBatch + ".zip")
|
||
})
|
||
} else {
|
||
this.WebScanController.makeMultiImage(imageIndexList, fileType, function (info) {
|
||
that.eleUnloadding()
|
||
let fileName = that.currentBatch + "." + fileType
|
||
console.log('导出文件成功:' + JSON.stringify(info))
|
||
that.downloadBase64File(info.image_base64, fileName)
|
||
})
|
||
}
|
||
|
||
},
|
||
//添加水印
|
||
addWaterMarkWithBatch: function () {
|
||
let that = this
|
||
that.canvas.remove(that.assistText)
|
||
that.$confirm('水印添加后不可撤销, 是否继续?', '添加水印', {
|
||
confirmButtonText: '继续',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}
|
||
).then(() => {
|
||
that.showBatchMarkConfigure = false
|
||
|
||
|
||
that.waterMarkInfo.text = that.waterMarkText
|
||
that.waterMarkInfo.text_color = that.markFontColor
|
||
that.waterMarkInfo.text_pos = that.markPosition
|
||
that.waterMarkInfo.text_opacity = 100
|
||
that.waterMarkInfo.margin_left = that.markMarginLeft
|
||
that.waterMarkInfo.margin_top = that.markMarginTop
|
||
that.waterMarkInfo.margin_right = that.markMarginRight
|
||
that.waterMarkInfo.margin_bottom = that.markMarginBottom
|
||
that.waterMarkInfo.location_x = that.markAbsoluteX
|
||
that.waterMarkInfo.location_y = that.markAbsoluteY
|
||
|
||
that.waterMarkInfo.font_name = that.markFontName
|
||
that.waterMarkInfo.font_size = that.markFontSize
|
||
that.waterMarkInfo.font_bold = that.markFontBold
|
||
that.waterMarkInfo.font_underline = that.markFontUnderline
|
||
that.waterMarkInfo.font_italic = that.markFontItalic
|
||
that.waterMarkInfo.font_strikeout = that.markFontStrikeout
|
||
|
||
|
||
console.log(JSON.stringify(that.waterMarkInfo))
|
||
console.log('范围:' + that.markInsertRange)
|
||
|
||
if (that.markInsertRange[1] - that.markInsertRange[0] == 0) {//只选择了一页
|
||
let modifyIndex = that.markInsertRange[0] - 1
|
||
|
||
that.WebScanController.imageAddWatermark(modifyIndex, that.waterMarkInfo, true, function (info) {
|
||
console.log('添加水印成功:')
|
||
|
||
that.WebScanController.modifyImage(modifyIndex, info.image_base64, function (modifyInfo) {
|
||
console.log('添加水印:修改' + modifyIndex + '成功:')
|
||
that.urls[modifyIndex].thumbnail = info.image_base64
|
||
that.urls[modifyIndex].base64 = info.image_base64
|
||
that.selectImage(that.urls[modifyIndex], modifyIndex)
|
||
that.$forceUpdate()
|
||
|
||
})
|
||
})
|
||
} else {//选择了多张
|
||
let startIndex = that.markInsertRange[0] - 1
|
||
that.curModifyIndex = startIndex
|
||
that.addWaterMarkSingle(startIndex, that.waterMarkInfo, that.addWaterMarkCallback)
|
||
}
|
||
})
|
||
.catch(() => {
|
||
})
|
||
|
||
},
|
||
addWaterMarkCallback: function () {
|
||
this.curModifyIndex++
|
||
if (this.curModifyIndex <= this.markInsertRange[1] - 1) {
|
||
console.log('继续处理水印:' + this.curModifyIndex)
|
||
this.addWaterMarkSingle(this.curModifyIndex, this.waterMarkInfo, this.addWaterMarkCallback)
|
||
} else {
|
||
console.log('水印循环结束:' + this.curModifyIndex)
|
||
}
|
||
},
|
||
addWaterMarkSingle: function (imageIndex, markInfoParams, succCallBack) {
|
||
let that = this
|
||
this.WebScanController.imageAddWatermark(imageIndex, markInfoParams, true, function (markInfo) {
|
||
console.log('多张添加水印成功:index:' + imageIndex)
|
||
let resultImage = markInfo.image_base64
|
||
that.WebScanController.modifyImage(imageIndex, resultImage, function (modifyInfo) {
|
||
console.log('多张添加水印:修改' + imageIndex + '成功:')
|
||
that.urls[imageIndex].thumbnail = resultImage
|
||
that.urls[imageIndex].base64 = resultImage
|
||
that.selectImage(that.urls[imageIndex], imageIndex)
|
||
that.$forceUpdate()
|
||
succCallBack()
|
||
})
|
||
})
|
||
},
|
||
/*******************************************canvas图像处理***************************************************************/
|
||
selectImage: function (image, index) {
|
||
|
||
let that = this
|
||
if (image.base64 == null || image.base64 == undefined || image.base64.length == 0) {
|
||
that.eleLoadding()
|
||
// {
|
||
// path: '',
|
||
// base64: '',
|
||
// thumbnail: base64//缩略图
|
||
// }
|
||
that.WebScanController.loadImage(index, function (oriImageInfo) {
|
||
console.log('加载原图成功 index:' + index)
|
||
that.eleUnloadding()
|
||
that.urls[index].base64 = oriImageInfo.image_base64
|
||
that.selectImage(that.urls[index], index)
|
||
})
|
||
} else {
|
||
|
||
that.selectImageObj = {
|
||
"image": image,
|
||
"index": index
|
||
}
|
||
console.log("selectImage: " + that.selectImageObj.index)
|
||
that.loadImageToCanvas(image);
|
||
that.selectManyImages = new Array();
|
||
that.selectManyImages.push(index);
|
||
that.undoStack.length = 0;
|
||
that.redoStack.length = 0;
|
||
if (!that.isScanning) {
|
||
that.curInsertIndex = -1
|
||
that.curCoverIndex = -1
|
||
}
|
||
}
|
||
},
|
||
selectManyImage: function (image, index) {
|
||
let that = this
|
||
if (image.base64 == null || image.base64 == undefined || image.base64.length == 0) {
|
||
//需要先加载原图才能正确操作图像
|
||
that.eleLoadding()
|
||
that.WebScanController.loadImage(index, function (oriImageInfo) {
|
||
console.log('加载原图成功 index:' + index)
|
||
that.eleUnloadding()
|
||
that.urls[index].base64 = oriImageInfo.image_base64
|
||
that.selectManyImage(that.urls[index], index)
|
||
})
|
||
} else {
|
||
this.selectImageObj = {
|
||
"image": image,
|
||
"index": index
|
||
}
|
||
var indexof = this.selectManyImages.indexOf(index);
|
||
if (indexof >= 0) {//原本就是选中了
|
||
var nextIndex = indexof + 1;
|
||
if (nextIndex < this.selectManyImages.length) {//小于最大,那就选中最大index
|
||
var index = this.selectManyImages[nextIndex];
|
||
this.selectImageObj = {
|
||
"image": this.urls[index],
|
||
"index": index
|
||
}
|
||
this.loadImageToCanvas(this.urls[index]);
|
||
} else {//取消选中最后一个index
|
||
var preIndex = indexof - 1;
|
||
if (preIndex >= 0) {
|
||
var index = this.selectManyImages[preIndex];
|
||
this.selectImageObj = {
|
||
"image": this.urls[index],
|
||
"index": index
|
||
}
|
||
this.loadImageToCanvas(this.urls[index]);
|
||
} else {//一个都不选了
|
||
this.loadImageToCanvas(null);
|
||
$(".canvas-container").css("border", "none");
|
||
}
|
||
}
|
||
this.selectManyImages.splice(indexof, 1);
|
||
} else {//选中原本未选中的
|
||
this.selectManyImages.push(index);
|
||
this.loadImageToCanvas(image);
|
||
}
|
||
}
|
||
},
|
||
addOptActive: function (e) {
|
||
if (e == null || e == undefined) {
|
||
return;
|
||
}
|
||
$(e.currentTarget).addClass("active");
|
||
$(e.currentTarget).siblings().removeClass("active");
|
||
},
|
||
ajustDimensions: function ($event) {
|
||
this.addOptActive($event);
|
||
this.clearDivListener();
|
||
if (this.image == null || this.image == undefined) {
|
||
this.$message.warning('请选择图像进行操作');
|
||
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();
|
||
},
|
||
loadImageToCanvas: function (imageSrc) {
|
||
this.clearDivListener()
|
||
this.canvas.clear()
|
||
this.canvas.setZoom(1)
|
||
this.scale = 1
|
||
this.angle = 0
|
||
this.totalAngle = 0
|
||
this.canvas.discardActiveObject()
|
||
let that = this
|
||
console.log('准备加载图像到画布:' + JSON.stringify(imageSrc))
|
||
new fabric.Image.fromURL(imageSrc ? imageSrc.base64 : null, function (image) {
|
||
console.log('加载图像:image===' + image)
|
||
let result = imageSrc ? image : null
|
||
that.image = result
|
||
that.canvas.add(image)
|
||
that.ajustDimensions()
|
||
}, {
|
||
selectable: false
|
||
})
|
||
|
||
$(".canvas-container").css("border", "2px solid #e1e1e1")
|
||
},
|
||
realDimensions: function ($event, withActive) {
|
||
if (withActive) {
|
||
this.addOptActive($event);
|
||
this.clearDivListener();
|
||
if (this.image == null || this.image == undefined) {
|
||
this.$message.warning('请选择图像进行操作');
|
||
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.canvas.off("mouse:dblclick");
|
||
|
||
this.rectificationDialog = false
|
||
this.showWaterMarkPosition = false
|
||
this.showWaterMark = false
|
||
},
|
||
//图像拆分
|
||
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();
|
||
that.eleLoadding();
|
||
|
||
console.log('x1:' + that.assistLine.x1, 'y1:' + that.assistLine.y1,
|
||
'x2:' + that.assistLine.x2, 'y2:' + that.assistLine.y2)
|
||
|
||
let currentIndex = that.selectImageObj.index
|
||
|
||
let location = Math.floor(isHorizontal ? that.assistLine.x1 : that.assistLine.y1)
|
||
console.log('location:' + location)
|
||
that.WebScanController.splitImage(currentIndex, isHorizontal ? 'horz' : 'vert', location, function (info) {
|
||
console.log('拆分图像成功:' + JSON.stringify(info))
|
||
that.eleUnloadding()
|
||
that.clearCanvasData()
|
||
|
||
if (info.image_base64_list.length == 2) {
|
||
|
||
let firstBase64 = info.image_base64_list[0]
|
||
let secondBase64 = info.image_base64_list[1]
|
||
|
||
let firstPath = info.image_path_list[0]
|
||
let secondPath = info.image_path_list[1]
|
||
|
||
that.WebScanController.modifyImage(currentIndex, secondBase64, function (info) {
|
||
console.log('图像拆分:第二张修改成功...')
|
||
that.urls[currentIndex] = {
|
||
base64: secondBase64,
|
||
thumbnail: secondBase64,
|
||
path: secondPath
|
||
}
|
||
|
||
that.WebScanController.insertImage(firstBase64, currentIndex, function (info) {
|
||
console.log('图像拆分:第一张插入成功...')
|
||
that.eleMessage('图像拆分成功!')
|
||
|
||
that.urls.splice(currentIndex, 0, {
|
||
base64: firstBase64,
|
||
thumbnail: firstBase64,
|
||
path: firstPath
|
||
})
|
||
|
||
})
|
||
})
|
||
} else {
|
||
that.eleMessage('图像返回异常!')
|
||
}
|
||
|
||
})
|
||
} else {
|
||
that.canvas.remove(that.assistLine);
|
||
that.canvas.remove(that.assistText);
|
||
}
|
||
}
|
||
});
|
||
})
|
||
})
|
||
},
|
||
clearCanvasData: function () {
|
||
this.image = null
|
||
this.selectImageObj = {index: -1}
|
||
this.undoStack.length = 0;
|
||
this.redoStack.length = 0;
|
||
},
|
||
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.image == undefined) {
|
||
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.image == undefined) {
|
||
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();
|
||
|
||
if (this.image == null || this.image == undefined) {
|
||
this.$message.warning('请选择图像进行操作');
|
||
return;
|
||
}
|
||
this.redoStack.length = 0;
|
||
this.rotateAngle(rotate);
|
||
//添加undo
|
||
var undo = {
|
||
"type": 'rotate',
|
||
"angle": rotate
|
||
}
|
||
this.undoStack.push(undo);
|
||
},
|
||
rotateAngle: function (rotate) {
|
||
if (!this.image) {
|
||
return
|
||
}
|
||
let that = this;
|
||
// this.angle+=rotate;
|
||
let zoom = this.canvas.getZoom();
|
||
let 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);
|
||
//旋转后的角度
|
||
let oldEven = (this.totalAngle / 90) % 2;
|
||
if (oldEven != 0 && this.totalAngle % 90 == 0) {
|
||
//设置group偏移
|
||
group.set({
|
||
left: this.image.height / 2,
|
||
top: this.image.width / 2
|
||
});
|
||
this.canvas.setDimensions({
|
||
width: this.image.height * zoom,
|
||
height: this.image.width * zoom
|
||
});
|
||
} else {
|
||
group.set({
|
||
left: this.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: this.image.width * zoom,
|
||
height: this.image.height * zoom
|
||
});
|
||
this.canvas.setBackgroundColor("#ffffff");
|
||
}
|
||
this.canvas.renderAll();
|
||
group.destroy();
|
||
},
|
||
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();
|
||
|
||
if (this.image == null || this.image == undefined) {
|
||
this.$message.warning('请选择图像进行操作');
|
||
return;
|
||
}
|
||
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();
|
||
if (this.image == null || this.image == undefined) {
|
||
this.$message.warning('请选择图像进行操作');
|
||
return;
|
||
}
|
||
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.selectImageObj == null || this.selectImageObj.base64 == '') {
|
||
// this.eleMessage("请选择图像", "warning");
|
||
// return;
|
||
// }
|
||
if (this.image == null || this.image == undefined) {
|
||
this.$message.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;
|
||
this.eleLoadding();
|
||
console.log('save image dataUrl:' + dataUrl)
|
||
|
||
|
||
this.WebScanController.modifyImage(this.selectImageObj.index, dataUrl, function (info) {
|
||
console.log('修改图像成功:' + JSON.stringify(info))
|
||
that.eleUnloadding()
|
||
that.undoStack.length = 0;
|
||
that.redoStack.length = 0;
|
||
//获取选中的一张重新赋值
|
||
that.selectImageObj.image.base64 = dataUrl;
|
||
that.urls[that.selectImageObj.index].thumbnail = dataUrl
|
||
that.urls[that.selectImageObj.index].base64 = dataUrl
|
||
})
|
||
|
||
},
|
||
//显示水印配置框
|
||
showWaterMarkConfigure: function ($event) {
|
||
if (this.selectImageObj == null || this.selectImageObj.image == null ||
|
||
this.selectImageObj.image == undefined) {
|
||
this.eleMessage("请选择要操作的文件", "warning");
|
||
return;
|
||
}
|
||
this.clearDivListener();
|
||
this.addOptActive($event);
|
||
this.markFontName = this.waterMarkInfo.font_name
|
||
this.markFontSize = this.waterMarkInfo.font_size
|
||
this.markFontBold = this.waterMarkInfo.font_bold
|
||
this.markFontUnderline = this.waterMarkInfo.font_underline
|
||
this.markFontItalic = this.waterMarkInfo.font_italic
|
||
this.markFontStrikeout = this.waterMarkInfo.font_strikeout
|
||
this.waterMarkText = this.waterMarkInfo.text
|
||
this.markFontColor = this.waterMarkInfo.text_color
|
||
this.showWaterMark = true
|
||
if (this.assistText != null) {
|
||
this.canvas.remove(this.assistText)
|
||
}
|
||
if (this.markText != null) {
|
||
this.canvas.remove(this.markText)
|
||
}
|
||
},
|
||
//水印文字配置完成
|
||
confirmMarkConfigure: function () {
|
||
this.showWaterMark = false
|
||
|
||
this.waterMarkInfo.font_name = this.markFontName
|
||
this.waterMarkInfo.font_size = this.markFontSize
|
||
this.waterMarkInfo.font_bold = this.markFontBold
|
||
this.waterMarkInfo.font_underline = this.markFontUnderline
|
||
this.waterMarkInfo.font_italic = this.markFontItalic
|
||
this.waterMarkInfo.font_strikeout = this.markFontStrikeout
|
||
this.waterMarkInfo.text = this.waterMarkText
|
||
this.waterMarkInfo.text_color = this.markFontColor
|
||
|
||
console.log('font_size:' + this.waterMarkInfo.font_size, 'fontStyle:' + this.waterMarkInfo.font_italic, 'underline:' + this.waterMarkInfo.font_underline, 'linethrough:' + this.waterMarkInfo.font_strikeout, 'fontWeight:' + this.waterMarkInfo.font_bold)
|
||
|
||
this.addWaterMark()
|
||
},
|
||
//往canvas添加文字水印
|
||
addWaterMark: function () {
|
||
this.realDimensions(null, false)
|
||
|
||
this.showWaterMarkPosition = true
|
||
this.markPositionTipX = 0
|
||
this.markPositionTipY = 0
|
||
let that = this
|
||
let fontSize = this.waterMarkInfo.font_size
|
||
let textColor = this.markFontColor
|
||
|
||
let fontStyle = 'normal'
|
||
if (this.waterMarkInfo.font_italic == true) {
|
||
fontStyle = 'italic'
|
||
}
|
||
let underline = false
|
||
if (this.waterMarkInfo.font_underline == true) {
|
||
underline = true
|
||
}
|
||
let linethrough = false
|
||
if (this.waterMarkInfo.font_strikeout == true) {
|
||
linethrough = true
|
||
}
|
||
|
||
let fontWeight = 'normal'
|
||
if (this.waterMarkInfo.font_bold == true) {
|
||
fontWeight = 'bold'
|
||
}
|
||
|
||
console.log('font_size:' + fontSize, 'fontStyle:' + fontStyle, 'underline:' + underline, 'linethrough:' + linethrough, 'fontWeight:' + fontWeight)
|
||
|
||
|
||
let zoom = this.canvas.getZoom()
|
||
fontSize = fontSize * zoom
|
||
|
||
this.canvas.on("mouse:down", function (ev) {
|
||
let pointer = that.canvas.getPointer(ev)
|
||
if (that.assistText != null) {
|
||
that.canvas.remove(that.assistText)
|
||
}
|
||
if (that.markText != null) {
|
||
that.canvas.remove(that.markText)
|
||
}
|
||
|
||
that.assistText = new fabric.IText('双击进行添加', {
|
||
left: pointer.x,
|
||
top: pointer.y + fontSize + 10,
|
||
fill: '#ff0000',
|
||
fontSize: fontSize,
|
||
selectable: false
|
||
})
|
||
|
||
|
||
that.markText = new fabric.IText(that.waterMarkInfo.text, {
|
||
left: pointer.x,
|
||
top: pointer.y,
|
||
fill: textColor,
|
||
fontSize: fontSize,
|
||
selectable: false,
|
||
fontStyle: fontStyle,
|
||
underline: underline,
|
||
linethrough: linethrough,
|
||
fontWeight: fontWeight,
|
||
fontFamily: that.waterMarkInfo.font_name,
|
||
});
|
||
|
||
that.canvas.add(that.assistText)
|
||
that.canvas.add(that.markText)
|
||
|
||
that.canvas.on("mouse:move", function (event) {
|
||
|
||
that.canvas.off("mouse:down")
|
||
let movepointer = that.canvas.getPointer(event);
|
||
that.canvas.remove(that.assistText)
|
||
that.canvas.remove(that.markText)
|
||
|
||
|
||
that.assistText = new fabric.IText('双击进行添加', {
|
||
left: movepointer.x,
|
||
top: movepointer.y + fontSize + 10,
|
||
fill: '#ff0000',
|
||
fontSize: fontSize,
|
||
selectable: false,
|
||
})
|
||
|
||
that.markText = new fabric.IText(that.waterMarkInfo.text, {
|
||
left: movepointer.x,
|
||
top: movepointer.y,
|
||
fill: textColor,
|
||
fontSize: fontSize,
|
||
selectable: false,
|
||
fontStyle: fontStyle,
|
||
underline: underline,
|
||
linethrough: linethrough,
|
||
fontWeight: fontWeight,
|
||
fontFamily: that.waterMarkInfo.font_name,
|
||
})
|
||
that.markPositionTipX = movepointer.x
|
||
that.markPositionTipY = movepointer.y
|
||
|
||
that.canvas.add(that.markText)
|
||
that.canvas.add(that.assistText)
|
||
})
|
||
that.canvas.on("mouse:dblclick", function (ev) {
|
||
|
||
that.canvas.remove(that.assistText)
|
||
that.$confirm('水印添加后不可撤销, 是否继续?', '添加水印', {
|
||
confirmButtonText: '继续',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}
|
||
).then(() => {
|
||
that.clearDivListener()
|
||
// that.eleLoadding();
|
||
console.log('markText:' + JSON.stringify(that.markText))
|
||
console.log('x1:' + that.markText.x1, 'y1:' + that.markText.y1,
|
||
'x2:' + that.markText.x2, 'y2:' + that.markText.y2)
|
||
|
||
let currentIndex = that.selectImageObj.index
|
||
|
||
|
||
let zoom = that.canvas.getZoom()
|
||
zoom = 1 / zoom;
|
||
|
||
let dataUrl = that.canvas.toDataURL({
|
||
format: 'jpeg',
|
||
multiplier: zoom,
|
||
quality: 1
|
||
});
|
||
that.eleLoadding()
|
||
console.log('save image dataUrl:' + dataUrl)
|
||
|
||
|
||
that.WebScanController.modifyImage(currentIndex, dataUrl, function (info) {
|
||
that.eleUnloadding()
|
||
console.log('修改成功')
|
||
that.urls[currentIndex].base64 = dataUrl
|
||
that.urls[currentIndex].thumbnail = dataUrl
|
||
|
||
that.undoStack.length = 0;
|
||
that.redoStack.length = 0;
|
||
that.loadImageToCanvas(that.urls[currentIndex])
|
||
|
||
//获取选中的一张重新赋值
|
||
that.selectImageObj.image.base64 = dataUrl;
|
||
})
|
||
|
||
})
|
||
.catch(() => {
|
||
that.canvas.remove(that.markText);
|
||
that.canvas.remove(that.assistText);
|
||
})
|
||
})
|
||
})
|
||
},
|
||
|
||
/******************************************* ***************************************************************/
|
||
formatJson: function () {
|
||
|
||
console.log('formatJson:' + this.originJson)
|
||
try {
|
||
const jsonObj = JSON.parse(this.originJson);
|
||
this.formatedJson = JSON.stringify(jsonObj, null, 4);
|
||
} catch (e) {
|
||
this.formatedJson = e
|
||
}
|
||
},
|
||
eleLoadding: function () {
|
||
this.fullscreenLoading = true
|
||
},
|
||
eleUnloadding: function () {
|
||
this.fullscreenLoading = false
|
||
},
|
||
eleMessage: function (msg, sign) {
|
||
let type = sign ? sign : 'success'
|
||
let message = msg ? msg : '未知异常'
|
||
|
||
this.$message({
|
||
message: message,
|
||
type: type,
|
||
duration: 2000
|
||
});
|
||
},
|
||
randomRange: function (min, max) { // min最小值,max最大值
|
||
return Math.floor(Math.random() * (max - min)) + min;
|
||
},
|
||
parameterTranslation: function (originalValue) {
|
||
let value
|
||
switch (originalValue) {
|
||
case "color":
|
||
value = "彩色"
|
||
break;
|
||
case "gray":
|
||
value = "灰度"
|
||
break;
|
||
case "binary":
|
||
value = "二进制"
|
||
break;
|
||
case "auto":
|
||
value = "自动"
|
||
break;
|
||
case "simplex":
|
||
value = "单面"
|
||
break;
|
||
case "duplex":
|
||
value = "双面"
|
||
break;
|
||
case "filter_blank_general":
|
||
value = "filter_blank_general"
|
||
break;
|
||
case "filter_blank_invoice":
|
||
value = "filter_blank_invoice"
|
||
break;
|
||
case "fold_in_half":
|
||
value = "fold_in_half"
|
||
break;
|
||
case "auto":
|
||
value = "匹配原始尺寸"
|
||
break;
|
||
case "a3":
|
||
value = "A3"
|
||
break;
|
||
case "a4":
|
||
value = "A4"
|
||
break;
|
||
case "a4_horz":
|
||
value = "A4横向"
|
||
break;
|
||
case "image_tiff_compression":
|
||
value = "tiff压缩方式"
|
||
break;
|
||
case "image_tiff_compression":
|
||
value = "tiff压缩质量"
|
||
break;
|
||
default:
|
||
value = originalValue
|
||
break
|
||
}
|
||
|
||
return value
|
||
},
|
||
parameterCoerceIn: function () {
|
||
let paramsRange = this.scanParamsRange
|
||
|
||
this.scanParams = new Array()
|
||
|
||
|
||
for (let i = 0; i < paramsRange.length; i++) {
|
||
let group = paramsRange[i]
|
||
let newGroup = {
|
||
group_name: group.group_name,
|
||
group_param: new Array()
|
||
}
|
||
for (let j = 0; j < group.group_param.length; j++) {
|
||
newGroup.group_param.push({
|
||
name: group.group_param[j].name,
|
||
value: group.group_param[j].value
|
||
})
|
||
}
|
||
this.scanParams.push(newGroup)
|
||
}
|
||
|
||
console.log('当前扫描参数:' + JSON.stringify(this.scanParams))
|
||
console.log('当前强强强扫描参数:' + JSON.stringify(paramsRange))
|
||
|
||
this.$forceUpdate()
|
||
// this.scanParams.some(function (value, index, array) {
|
||
// console.log('value:' + JSON.stringify(value), 'index:' + index)
|
||
//
|
||
// return false
|
||
// })
|
||
},
|
||
parameterSupport: function (param) {
|
||
let match =//
|
||
console.log('是否匹配:' + /"name":"背景移除",/.test(JSON.stringify(value)))
|
||
|
||
// vice_param": [
|
||
// {
|
||
// "name": "多流输出",
|
||
// "value_type": "bool",
|
||
// "value": false
|
||
// },
|
||
// {
|
||
// "name": "多流输出类型",
|
||
// "value_type": "string",
|
||
// "value": "无",
|
||
// "value_list": [
|
||
// "彩色+灰度+黑白",
|
||
// "彩色+灰度",
|
||
// "彩色+黑白",
|
||
// "灰度+黑白"
|
||
// ]
|
||
// },
|
||
|
||
// {
|
||
// "name": "背景移除",
|
||
// "value_type": "bool",
|
||
// "value": false
|
||
// },
|
||
// {
|
||
// "name": "背景色彩浮动范围",
|
||
// "value_type": "int",
|
||
// "value": 20,
|
||
// "range_type": "min_max",
|
||
// "value_min": 1,
|
||
// "value_max": 128
|
||
// },
|
||
|
||
// {
|
||
// "name": "黑白图像噪点优化",
|
||
// "value_type": "bool",
|
||
// "value": false
|
||
// },
|
||
// {
|
||
// "name": "噪点优化尺寸",
|
||
// "value_type": "int",
|
||
// "value": 30,
|
||
// "range_type": "min_max",
|
||
// "value_min": 10,
|
||
// "value_max": 50
|
||
// },
|
||
|
||
|
||
// {
|
||
// "name": "自定义扫描区域",
|
||
// "value_type": "bool",
|
||
// "value": false
|
||
// },
|
||
// {
|
||
// "name": "扫描区域左侧(mm)",
|
||
// "value_type": "double",
|
||
// "value": 0,
|
||
// "range_type": "min_max",
|
||
// "value_min": 0,
|
||
// "value_max": 210
|
||
// },
|
||
// {
|
||
// "name": "扫描区域右侧(mm)",
|
||
// "value_type": "double",
|
||
// "value": 210,
|
||
// "range_type": "min_max",
|
||
// "value_min": 0,
|
||
// "value_max": 210
|
||
// },
|
||
// {
|
||
// "name": "扫描区域上侧(mm)",
|
||
// "value_type": "double",
|
||
// "value": 0,
|
||
// "range_type": "min_max",
|
||
// "value_min": 0,
|
||
// "value_max": 297
|
||
// },
|
||
// {
|
||
// "name": "扫描区域下侧(mm)",
|
||
// "value_type": "double",
|
||
// "value": 297,
|
||
// "range_type": "min_max",
|
||
// "value_min": 0,
|
||
// "value_max": 297
|
||
// },
|
||
|
||
// {
|
||
// "name": "扫描页面",
|
||
// "value_type": "string",
|
||
// "value": "双面",
|
||
// "value_list": [
|
||
// "单面",
|
||
// "双面",
|
||
// "跳过空白页(通用)",
|
||
// "跳过空白页(发票纸)",
|
||
// "对折"
|
||
// ]
|
||
// },
|
||
// {
|
||
// "name": "跳过空白页灵敏度",
|
||
// "value_type": "int",
|
||
// "value": 50,
|
||
// "range_type": "min_max",
|
||
// "value_min": 1,
|
||
// "value_max": 100
|
||
// },
|
||
|
||
|
||
// {
|
||
// "name": "深色样张",
|
||
// "value_type": "bool",
|
||
// "value": false
|
||
// },
|
||
// {
|
||
// "name": "阈值",
|
||
// "value_type": "int",
|
||
// "value": 40,
|
||
// "range_type": "min_max",
|
||
// "value_min": 30,
|
||
// "value_max": 50
|
||
// },
|
||
// {
|
||
// "name": "背景抗噪等级",
|
||
// "value_type": "int",
|
||
// "value": 8,
|
||
// "range_type": "min_max",
|
||
// "value_min": 1,
|
||
// "value_max": 20
|
||
// },
|
||
//
|
||
|
||
// {
|
||
// "name": "扫描张数",
|
||
// "value_type": "string",
|
||
// "value": "连续扫描",
|
||
// "value_list": [
|
||
// "连续扫描",
|
||
// "扫描指定张数"
|
||
// ]
|
||
// },
|
||
// {
|
||
// "name": "扫描数量",
|
||
// "value_type": "int",
|
||
// "value": 1
|
||
// },
|
||
},
|
||
// parameterCoerceIn: function () {
|
||
// let paramsRange = this.scanParamsRange
|
||
//
|
||
// this.scanParams.color_mode = paramsRange.color_mode
|
||
// this.scanParams.page_mode = paramsRange.page_mode
|
||
// this.scanParams.resolution = paramsRange.resolution
|
||
// this.scanParams.paper_size = paramsRange.paper_size
|
||
// this.scanParams.brightness = paramsRange.brightness
|
||
// this.scanParams.contrast = paramsRange.contrast
|
||
// this.scanParams.gamma = paramsRange.gamma
|
||
// this.scanParams.paper_cut_enabled = paramsRange.paper_cut_enabled
|
||
//
|
||
// this.scanParams.paper_cut_left = paramsRange.paper_cut_left
|
||
// this.scanParams.paper_cut_top = paramsRange.paper_cut_top
|
||
// this.scanParams.paper_cut_right = paramsRange.paper_cut_right
|
||
// this.scanParams.paper_cut_bottom = paramsRange.paper_cut_bottom
|
||
// this.scanParams.auto_crop = paramsRange.auto_crop
|
||
// },
|
||
// 将base64转换为blob
|
||
dataURLtoBlob: function (dataUrl) {
|
||
let data
|
||
if (dataUrl.indexOf(',') != -1) {
|
||
data = dataUrl.split(',')[1]
|
||
} else {
|
||
data = dataUrl
|
||
}
|
||
let bstr = atob(data)
|
||
let n = bstr.length
|
||
let 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
|
||
},
|
||
downloadBase64File: function (base64, fileName) {
|
||
let blob = this.dataURLtoBlob(base64)
|
||
|
||
if (window.navigator.msSaveOrOpenBlob) {
|
||
navigator.msSaveBlob(blob, fileName)
|
||
} else {
|
||
this.blobToFile(blob, fileName)
|
||
let aLink = document.createElement('a')
|
||
document.body.appendChild(aLink)
|
||
let evt = document.createEvent("HTMLEvents")
|
||
evt.initEvent("click", true, true)
|
||
aLink.download = fileName
|
||
aLink.href = URL.createObjectURL(blob)
|
||
aLink.click()
|
||
document.body.removeChild(aLink)
|
||
}
|
||
},
|
||
clearLog() {
|
||
this.socketMsg = ''
|
||
},
|
||
appendLog(msg) {
|
||
this.socketMsg = this.socketMsg + this.showtime() + ' ' + msg + '\n'
|
||
|
||
this.$nextTick(function () {
|
||
if (this.$refs.logArea) {
|
||
this.$refs.logArea.scrollTop = this.$refs.logArea.scrollHeight
|
||
}
|
||
})
|
||
},
|
||
sendSocketCommand: function () {
|
||
if (this.socketCommand.length != 0) {
|
||
try {
|
||
JSON.parse(this.socketCommand);
|
||
// const socketCommand = JSON.stringify(this.socketCommand)
|
||
} catch (e) {
|
||
const err = 'json format err:' + e
|
||
this.appendLog(err)
|
||
console.log(err)
|
||
return
|
||
}
|
||
console.log('sendSocketCommand:' + this.socketCommand)
|
||
this.WebScanController.sendCommand(JSON.parse(this.socketCommand))
|
||
this.appendLog('send socket command:' + this.socketCommand)
|
||
} else {
|
||
const msg = 'sendSocketCommand: command is empty!!!'
|
||
this.appendLog(msg)
|
||
console.log(msg)
|
||
}
|
||
},
|
||
showtime: function () {
|
||
const date = new Date();
|
||
let h = this.checkTime(date.getHours())
|
||
let m = this.checkTime(date.getMinutes())
|
||
let s = this.checkTime(date.getSeconds())
|
||
return h + ":" + m + ":" + s
|
||
},
|
||
checkTime: function (i) {
|
||
if (i < 10) {
|
||
i = "0" + i;
|
||
}
|
||
return i;
|
||
},
|
||
showBigImage: function (index) {
|
||
console.log('showBigImage:' + index)
|
||
if (this.urls[index].base64 == null || this.urls[index].base64 == undefined || this.urls[index].base64.length == 0) {
|
||
let that = this
|
||
this.WebScanController.loadImage(index, function (origImageInfo) {
|
||
console.log('加载原图成功!')
|
||
that.urls[index].base64 = origImageInfo.image_base64
|
||
that.showBigImage(index)
|
||
})
|
||
} else {
|
||
this.selectBigImage = this.urls[index].base64
|
||
this.showBigImageDialog = true
|
||
}
|
||
}
|
||
}
|
||
})
|