2022-06-17 02:51:29 +00:00
|
|
|
|
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:从指定位置开始往后覆盖或者添加
|
2023-11-14 08:33:20 +00:00
|
|
|
|
curInsertIndex: -1,//顺序扫描 当前需要插入的位置
|
|
|
|
|
curCoverIndex: -1,//覆盖扫描 当前需要覆盖扫描的位置
|
2022-06-17 02:51:29 +00:00
|
|
|
|
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
|
|
|
|
|
},
|
2022-07-29 08:29:30 +00:00
|
|
|
|
//上传配置
|
|
|
|
|
uploadConfig: {
|
|
|
|
|
remote_file_path: '/images',
|
|
|
|
|
upload_mode: 'none',
|
|
|
|
|
http_host: '',
|
|
|
|
|
http_port: 80,
|
|
|
|
|
http_path: '/upload.cgi',
|
|
|
|
|
ftp_user: 'administrator',
|
|
|
|
|
ftp_password: '2018',
|
|
|
|
|
ftp_host: '192.168.0.22',
|
|
|
|
|
ftp_port: 21
|
|
|
|
|
},
|
2022-06-17 02:51:29 +00:00
|
|
|
|
//水印信息
|
|
|
|
|
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
|
2023-11-14 08:33:20 +00:00
|
|
|
|
insertQueue: [{
|
|
|
|
|
insertType: -1,// 插入类型 -1占位啥都没有 1.加到末尾 2.插入到指定位置 3.覆盖指定位置图片
|
|
|
|
|
imagePath: '',//插入图像的路径
|
|
|
|
|
insertIndex: 0, //插入位置
|
|
|
|
|
idenInfo: {},//签名
|
|
|
|
|
}],//插入队列,等待结果返回再继续插入
|
|
|
|
|
insertLoopWork: Number,
|
2022-06-17 02:51:29 +00:00
|
|
|
|
},
|
|
|
|
|
created: function () {
|
|
|
|
|
window.eleLoadding = this.eleLoadding;
|
|
|
|
|
window.eleAlert = this.eleMessage;
|
|
|
|
|
window.scanCallBack = this.scanCallBack;
|
|
|
|
|
window.setupWindowCallBack = this.setupWindowCallBack
|
|
|
|
|
window.socketCallBack = this.onSocketCallBack
|
2023-11-14 08:33:20 +00:00
|
|
|
|
window.onbeforeunload = this.onCloseScreen
|
|
|
|
|
|
|
|
|
|
let that = this;
|
|
|
|
|
this.insertQueue.length = 0
|
|
|
|
|
|
|
|
|
|
this.insertLoopWork = setInterval(() => {
|
|
|
|
|
//首位不是占位数据的
|
|
|
|
|
if (that.insertQueue.length > 0 && that.insertQueue[0].insertType !== -1) {
|
|
|
|
|
|
|
|
|
|
let insertInfo = that.insertQueue[0]
|
|
|
|
|
console.log('loop work:' + insertInfo.insertType + ' ' + insertInfo.imagePath)
|
|
|
|
|
//先去掉队列的第一位
|
|
|
|
|
that.insertQueue.splice(0, 1)
|
|
|
|
|
//插入占位数据
|
|
|
|
|
that.insertQueue.splice(0, 0, {insertType: -1})
|
|
|
|
|
that.insertAction(insertInfo)
|
|
|
|
|
}
|
|
|
|
|
}, 400);
|
|
|
|
|
|
2022-06-17 02:51:29 +00:00
|
|
|
|
},
|
|
|
|
|
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) {
|
2023-11-14 08:33:20 +00:00
|
|
|
|
if (info.func === 'is_device_init' || info.func === 'get_curr_device_name') {
|
|
|
|
|
//单独处理 ret 0 初始化了 非0 未初始化
|
|
|
|
|
let funcName = this.WebScanController.getCallBack(info.func)
|
|
|
|
|
if (funcName) {
|
|
|
|
|
funcName(info)
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
|
|
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()
|
|
|
|
|
}
|
2022-06-17 02:51:29 +00:00
|
|
|
|
}
|
|
|
|
|
}
|
2023-11-14 08:33:20 +00:00
|
|
|
|
} else {
|
|
|
|
|
this.commonDispatch(info)
|
2022-06-17 02:51:29 +00:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
commonDispatch: function (info) {//较通用事件处理
|
|
|
|
|
this.eleUnloadding()
|
2023-11-14 08:33:20 +00:00
|
|
|
|
// console.log('commonDispatch:', JSON.stringify(info))
|
2022-06-17 02:51:29 +00:00
|
|
|
|
if (info) {
|
|
|
|
|
switch (info.func) {
|
|
|
|
|
case "device_arrive"://设备装载
|
|
|
|
|
this.eleMessage("设备已装载")
|
|
|
|
|
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"://图片回调
|
2023-02-28 07:18:06 +00:00
|
|
|
|
let imagePath = info.image_path
|
|
|
|
|
|
2022-06-17 02:51:29 +00:00
|
|
|
|
if (this.scanMode == 'insert') {//是插入扫描
|
|
|
|
|
this.curCoverIndex = -1
|
|
|
|
|
|
|
|
|
|
//找到文件位置,插入元素
|
|
|
|
|
if (this.curInsertIndex != -1) {
|
|
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
this.curInsertIndex = this.selectImageObj.index
|
|
|
|
|
}
|
|
|
|
|
|
2023-11-14 08:33:20 +00:00
|
|
|
|
console.log('插入扫描:队列插入位:' + this.curInsertIndex + " path:" + imagePath)
|
|
|
|
|
|
|
|
|
|
this.insertQueue.push({
|
|
|
|
|
insertType: 2,
|
|
|
|
|
imagePath: imagePath,
|
|
|
|
|
insertIndex: this.curInsertIndex,
|
|
|
|
|
idenInfo: {
|
|
|
|
|
insertType: 2,
|
|
|
|
|
insertIndex: this.curInsertIndex,
|
|
|
|
|
path: imagePath,
|
|
|
|
|
base64: info.image_base64
|
|
|
|
|
},//签名
|
|
|
|
|
})
|
|
|
|
|
this.curInsertIndex++
|
|
|
|
|
|
|
|
|
|
} else if (this.scanMode == 'cover') {//是覆盖扫描
|
|
|
|
|
console.log('覆盖扫描,起始位index' + this.curCoverIndex + ' imagePath:' + imagePath + ' 总长度位置:' + (this.urls.length - 1))
|
|
|
|
|
console.log('需要覆盖的数量:' + this.needCoverCount)
|
|
|
|
|
this.insertQueue.push({
|
|
|
|
|
insertType: 3,
|
|
|
|
|
imagePath: imagePath,
|
|
|
|
|
idenInfo: {
|
|
|
|
|
insertType: 3,
|
2023-02-28 07:18:06 +00:00
|
|
|
|
path: imagePath,
|
2022-06-17 02:51:29 +00:00
|
|
|
|
base64: info.image_base64
|
2023-02-28 07:18:06 +00:00
|
|
|
|
},
|
2023-11-14 08:33:20 +00:00
|
|
|
|
})
|
|
|
|
|
} else {//正常按顺序
|
2022-06-17 02:51:29 +00:00
|
|
|
|
|
2023-11-14 08:33:20 +00:00
|
|
|
|
this.curCoverIndex = -1
|
2022-06-17 02:51:29 +00:00
|
|
|
|
|
2023-11-14 08:33:20 +00:00
|
|
|
|
console.log('顺序扫描,队列插入位' + this.curInsertIndex + ' imagePath:' + imagePath)
|
2022-06-17 02:51:29 +00:00
|
|
|
|
|
2023-11-14 08:33:20 +00:00
|
|
|
|
this.insertQueue.push({
|
|
|
|
|
insertType: 1,
|
|
|
|
|
imagePath: imagePath,
|
|
|
|
|
insertIndex: this.curInsertIndex,
|
|
|
|
|
idenInfo: {
|
|
|
|
|
insertType: 2,
|
|
|
|
|
path: imagePath,
|
|
|
|
|
insertIndex: this.curInsertIndex,
|
|
|
|
|
base64: info.image_base64
|
|
|
|
|
},//签名
|
|
|
|
|
})
|
|
|
|
|
this.curInsertIndex++
|
|
|
|
|
}
|
|
|
|
|
break
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
//扫描展示逻辑
|
|
|
|
|
insertAction: function (info) {
|
2022-06-17 02:51:29 +00:00
|
|
|
|
|
2023-11-14 08:33:20 +00:00
|
|
|
|
/* {
|
|
|
|
|
insertType: 1,
|
|
|
|
|
imagePath: imagePath,
|
|
|
|
|
insertIndex: this.insertIndex,
|
|
|
|
|
idenInfo: {
|
|
|
|
|
insertType: 2,
|
|
|
|
|
path: imagePath,
|
|
|
|
|
insertIndex: this.insertIndex,
|
|
|
|
|
base64: info.image_base64
|
|
|
|
|
}*/
|
2022-06-17 02:51:29 +00:00
|
|
|
|
|
2023-11-14 08:33:20 +00:00
|
|
|
|
let that = this
|
2022-06-17 02:51:29 +00:00
|
|
|
|
|
2023-11-14 08:33:20 +00:00
|
|
|
|
if (info.insertType === 3) {//是覆盖扫描逻辑
|
2022-06-17 02:51:29 +00:00
|
|
|
|
|
2023-11-14 08:33:20 +00:00
|
|
|
|
if (this.needCoverCount > 0) {//还在覆盖范围内,直接覆盖掉
|
|
|
|
|
this.WebScanController.modifyImage(this.curCoverIndex, info.idenInfo.base64, info.idenInfo, function (modifyInfo) {
|
2022-06-17 02:51:29 +00:00
|
|
|
|
|
2023-11-14 08:33:20 +00:00
|
|
|
|
let idenInfo = JSON.parse(modifyInfo.iden);
|
2022-06-17 02:51:29 +00:00
|
|
|
|
|
2023-11-14 08:33:20 +00:00
|
|
|
|
console.log('覆盖前:index==' + that.curCoverIndex + ' path:' + that.urls[that.curCoverIndex].path)
|
2022-06-17 02:51:29 +00:00
|
|
|
|
|
2023-11-14 08:33:20 +00:00
|
|
|
|
that.urls[that.curCoverIndex] = {
|
|
|
|
|
base64: idenInfo.base64,
|
|
|
|
|
thumbnail: idenInfo.base64,
|
|
|
|
|
path: idenInfo.path
|
|
|
|
|
}
|
|
|
|
|
console.log('覆盖后:index==' + that.curCoverIndex + ' path:' + that.urls[that.curCoverIndex].path)
|
2023-02-28 07:18:06 +00:00
|
|
|
|
|
2023-11-14 08:33:20 +00:00
|
|
|
|
that.curCoverIndex++
|
|
|
|
|
that.needCoverCount--
|
2023-02-28 07:18:06 +00:00
|
|
|
|
|
2023-11-14 08:33:20 +00:00
|
|
|
|
that.$forceUpdate()
|
|
|
|
|
|
|
|
|
|
//把占位符删掉 继续下一轮循环
|
|
|
|
|
if (that.insertQueue.length > 0 && that.insertQueue[0].insertType === -1) {
|
|
|
|
|
that.insertQueue.splice(0, 1)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
} else {//之后都是新增的往后添加了
|
|
|
|
|
this.WebScanController.insertLocalImage(info.imagePath, this.urls.length, info.idenInfo, function (result) {
|
|
|
|
|
console.log('覆盖扫描:插入成功 index:' + that.urls.length)
|
|
|
|
|
let idenInfo = JSON.parse(result.iden);
|
|
|
|
|
|
|
|
|
|
that.urls.push({
|
|
|
|
|
path: idenInfo.path,
|
|
|
|
|
thumbnail: idenInfo.base64,
|
|
|
|
|
base64: idenInfo.base64
|
|
|
|
|
})
|
|
|
|
|
that.$forceUpdate()
|
|
|
|
|
|
|
|
|
|
that.$nextTick(function () {
|
|
|
|
|
if (that.$refs.imageArea) {
|
|
|
|
|
that.$refs.imageArea.scrollTop = that.$refs.imageArea.scrollHeight
|
|
|
|
|
}
|
|
|
|
|
})
|
2023-02-28 07:18:06 +00:00
|
|
|
|
|
2022-06-17 02:51:29 +00:00
|
|
|
|
|
2023-11-14 08:33:20 +00:00
|
|
|
|
//把占位符删掉 继续下一轮循环
|
|
|
|
|
if (that.insertQueue.length > 0 && that.insertQueue[0].insertType === -1) {
|
|
|
|
|
that.insertQueue.splice(0, 1)
|
2022-06-17 02:51:29 +00:00
|
|
|
|
}
|
2023-11-14 08:33:20 +00:00
|
|
|
|
|
|
|
|
|
})
|
2022-06-17 02:51:29 +00:00
|
|
|
|
}
|
2023-11-14 08:33:20 +00:00
|
|
|
|
} else {
|
|
|
|
|
this.WebScanController.insertLocalImage(info.imagePath, info.insertIndex, info.idenInfo, function (result) {
|
|
|
|
|
|
|
|
|
|
let idenInfo = JSON.parse(result.iden);
|
|
|
|
|
if (idenInfo.insertType === 1) {
|
|
|
|
|
//正常扫描,往后添加
|
|
|
|
|
console.log('正常扫描:插入成功 index:' + idenInfo.insertIndex + ' path:' + idenInfo.path)
|
|
|
|
|
//插入到正确位置
|
|
|
|
|
that.urls.splice(idenInfo.insertIndex, 0, {
|
|
|
|
|
path: idenInfo.path,
|
|
|
|
|
thumbnail: idenInfo.base64,
|
|
|
|
|
base64: idenInfo.base64
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
that.$nextTick(function () {
|
|
|
|
|
if (that.$refs.imageArea) {
|
|
|
|
|
that.$refs.imageArea.scrollTop = that.$refs.imageArea.scrollHeight
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
} else if (idenInfo.insertType == 2) {
|
|
|
|
|
//插入扫描,指定位置
|
|
|
|
|
console.log('插入扫描:插入index' + idenInfo.insertIndex + ' path:' + idenInfo.path)
|
|
|
|
|
//插入到正确位置
|
|
|
|
|
that.urls.splice(idenInfo.insertIndex, 0, {
|
|
|
|
|
path: idenInfo.path,
|
|
|
|
|
thumbnail: idenInfo.base64,
|
|
|
|
|
base64: idenInfo.base64
|
|
|
|
|
})
|
|
|
|
|
that.$forceUpdate()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//把占位符删掉 继续下一轮循环
|
|
|
|
|
if (that.insertQueue.length > 0 && that.insertQueue[0].insertType === -1) {
|
|
|
|
|
that.insertQueue.splice(0, 1)
|
|
|
|
|
}
|
|
|
|
|
})
|
2022-06-17 02:51:29 +00:00
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
//一些初始化操作
|
|
|
|
|
initData: function () {
|
|
|
|
|
let that = this
|
|
|
|
|
this.getGlobalConfig()
|
|
|
|
|
this.getBatchList(function () {
|
|
|
|
|
that.changeBatch(that.batchIdList.slice(-1)[0])
|
|
|
|
|
})
|
|
|
|
|
},
|
2023-11-14 08:33:20 +00:00
|
|
|
|
//界面销毁
|
|
|
|
|
onCloseScreen: function () {
|
|
|
|
|
this.releaseService()
|
|
|
|
|
if (this.insertLoopWork) {
|
|
|
|
|
clearInterval(this.insertLoopWork)
|
|
|
|
|
}
|
|
|
|
|
},
|
2022-06-17 02:51:29 +00:00
|
|
|
|
//关闭服务
|
|
|
|
|
releaseService: function () {
|
2023-11-14 08:33:20 +00:00
|
|
|
|
console.log('releaseService')
|
2022-06-17 02:51:29 +00:00
|
|
|
|
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
|
2023-11-14 08:33:20 +00:00
|
|
|
|
this.WebScanController.isDeviceInit(function (info) {
|
|
|
|
|
console.log('isDeviceInit:' + JSON.stringify(info))
|
|
|
|
|
if (info.ret == 0) {
|
|
|
|
|
//已经初始化
|
|
|
|
|
that.deviceInited = true
|
|
|
|
|
if (succcallBack != null) {
|
|
|
|
|
succcallBack()
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
//没有初始化
|
|
|
|
|
console.log('start device init ' + new Date().getTime())
|
|
|
|
|
|
|
|
|
|
that.WebScanController.initDevice(function (info) {
|
|
|
|
|
console.log('init devices :' + JSON.stringify(info) + ' ' + new Date().getTime())
|
|
|
|
|
that.deviceInited = true
|
|
|
|
|
if (succcallBack != null) {
|
|
|
|
|
succcallBack()
|
|
|
|
|
}
|
|
|
|
|
})
|
2022-06-17 02:51:29 +00:00
|
|
|
|
}
|
2023-11-14 08:33:20 +00:00
|
|
|
|
|
2022-06-17 02:51:29 +00:00
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
//反初始化设备(需初始化后调用)
|
|
|
|
|
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) {
|
2023-11-14 08:33:20 +00:00
|
|
|
|
console.log('getDeviceNameList :' + JSON.stringify(info))
|
2022-06-17 02:51:29 +00:00
|
|
|
|
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
|
2023-11-14 08:33:20 +00:00
|
|
|
|
|
|
|
|
|
this.WebScanController.getCurrDeviceName(function (info) {
|
|
|
|
|
console.log('getCurrDeviceName:' + JSON.stringify(info))
|
|
|
|
|
if (info.device_name) {
|
|
|
|
|
that.deviceOpened = true
|
|
|
|
|
that.eleLoadding()
|
|
|
|
|
that.getScanParams()
|
|
|
|
|
} else {
|
|
|
|
|
that.WebScanController.openDevice(deviceName, function (info) {
|
|
|
|
|
console.log('open devices :' + JSON.stringify(info))
|
|
|
|
|
that.deviceOpened = true
|
|
|
|
|
that.eleLoadding()
|
|
|
|
|
that.getScanParams()
|
|
|
|
|
})
|
|
|
|
|
}
|
2022-06-17 02:51:29 +00:00
|
|
|
|
})
|
2023-11-14 08:33:20 +00:00
|
|
|
|
|
|
|
|
|
|
2022-06-17 02:51:29 +00:00
|
|
|
|
},
|
|
|
|
|
//关闭设备
|
|
|
|
|
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++) {
|
2022-07-29 08:29:30 +00:00
|
|
|
|
if (group[j].value != undefined) {
|
|
|
|
|
result.push({
|
|
|
|
|
name: group[j].name,
|
|
|
|
|
value: group[j].value
|
|
|
|
|
})
|
|
|
|
|
}
|
2022-06-17 02:51:29 +00:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
this.WebScanController.setScanParams(result, function (info) {
|
|
|
|
|
console.log('setScanParams :' + info)
|
|
|
|
|
that.eleMessage("设置扫描参数成功")
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
//获取扫描参数
|
|
|
|
|
getScanParams: function () {
|
|
|
|
|
let that = this
|
|
|
|
|
this.WebScanController.getScanParams(function (info) {
|
|
|
|
|
that.eleUnloadding()
|
2023-11-14 08:33:20 +00:00
|
|
|
|
// console.log('获取到的扫描参数 :' + JSON.stringify(info))
|
2022-06-17 02:51:29 +00:00
|
|
|
|
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'
|
2023-11-14 08:33:20 +00:00
|
|
|
|
this.curInsertIndex = this.urls.length
|
2022-06-17 02:51:29 +00:00
|
|
|
|
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
|
|
|
|
|
|
2023-11-14 08:33:20 +00:00
|
|
|
|
this.curInsertIndex = -1
|
|
|
|
|
this.curCoverIndex = this.selectImageObj.index
|
|
|
|
|
this.needCoverCount = this.urls.length - this.curCoverIndex
|
|
|
|
|
|
|
|
|
|
|
2022-06-17 02:51:29 +00:00
|
|
|
|
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
|
2023-11-14 08:33:20 +00:00
|
|
|
|
setTimeout(function () {
|
|
|
|
|
that.getDeviceNameList()
|
|
|
|
|
}, 500);
|
2022-06-17 02:51:29 +00:00
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
/*******************************************文件管理***************************************************************/
|
|
|
|
|
//获取最后批次的内容
|
|
|
|
|
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) {
|
2023-11-14 08:33:20 +00:00
|
|
|
|
console.log('打开批次:' + JSON.stringify(info))
|
2022-06-17 02:51:29 +00:00
|
|
|
|
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('添加水印成功:')
|
|
|
|
|
|
2023-02-28 07:18:06 +00:00
|
|
|
|
that.WebScanController.modifyImage(modifyIndex, info.image_base64, {}, function (modifyInfo) {
|
2022-06-17 02:51:29 +00:00
|
|
|
|
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
|
2023-02-28 07:18:06 +00:00
|
|
|
|
that.WebScanController.modifyImage(imageIndex, resultImage, {}, function (modifyInfo) {
|
2022-06-17 02:51:29 +00:00
|
|
|
|
console.log('多张添加水印:修改' + imageIndex + '成功:')
|
|
|
|
|
that.urls[imageIndex].thumbnail = resultImage
|
|
|
|
|
that.urls[imageIndex].base64 = resultImage
|
|
|
|
|
that.selectImage(that.urls[imageIndex], imageIndex)
|
|
|
|
|
that.$forceUpdate()
|
|
|
|
|
succCallBack()
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
},
|
2022-07-29 08:29:30 +00:00
|
|
|
|
//文件上传
|
|
|
|
|
uploadFile: function () {
|
|
|
|
|
let data = this.urls
|
|
|
|
|
|
|
|
|
|
if (data.length == 0) {
|
|
|
|
|
this.eleMessage('请先扫描!')
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
for (let index = 0; index < data.length; index++) {
|
|
|
|
|
let path = data[index].path
|
|
|
|
|
|
|
|
|
|
let config = this.uploadConfig
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let fileName = path.slice(path.lastIndexOf('\\') + 1, path.length)
|
|
|
|
|
if (fileName.length == 0) {
|
|
|
|
|
fileName = this.currentBatch + '-' + index + ".jpg"
|
|
|
|
|
}
|
|
|
|
|
console.log('fileName:' + fileName)
|
|
|
|
|
|
|
|
|
|
let remoteFilePath = config.remote_file_path
|
|
|
|
|
|
|
|
|
|
if (!remoteFilePath.startsWith("/")) {
|
|
|
|
|
remoteFilePath = "/" + remoteFilePath
|
|
|
|
|
}
|
|
|
|
|
remoteFilePath = remoteFilePath.endsWith("/") ? remoteFilePath + fileName : remoteFilePath + "/" + fileName
|
|
|
|
|
|
|
|
|
|
console.log('全路径名:' + remoteFilePath)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.WebScanController.uploadImage(index,
|
|
|
|
|
config.upload_mode,
|
|
|
|
|
remoteFilePath,
|
|
|
|
|
config.http_host,
|
|
|
|
|
config.http_port,
|
|
|
|
|
config.http_path,
|
|
|
|
|
config.ftp_user,
|
|
|
|
|
config.ftp_password,
|
|
|
|
|
config.ftp_host,
|
|
|
|
|
config.ftp_port,
|
|
|
|
|
function (info) {
|
|
|
|
|
console.log('上传完成:' + JSON.stringify(info))
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
2022-06-17 02:51:29 +00:00
|
|
|
|
/*******************************************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
|
2023-02-28 07:18:06 +00:00
|
|
|
|
// console.log('准备加载图像到画布:' + JSON.stringify(imageSrc))
|
2022-06-17 02:51:29 +00:00
|
|
|
|
new fabric.Image.fromURL(imageSrc ? imageSrc.base64 : null, function (image) {
|
2023-02-28 07:18:06 +00:00
|
|
|
|
// console.log('加载图像:image===' + image)
|
2022-06-17 02:51:29 +00:00
|
|
|
|
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]
|
|
|
|
|
|
2023-02-28 07:18:06 +00:00
|
|
|
|
that.WebScanController.modifyImage(currentIndex, secondBase64, {}, function (info) {
|
2022-06-17 02:51:29 +00:00
|
|
|
|
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)
|
|
|
|
|
|
|
|
|
|
|
2023-02-28 07:18:06 +00:00
|
|
|
|
this.WebScanController.modifyImage(this.selectImageObj.index, dataUrl, {}, function (info) {
|
2022-06-17 02:51:29 +00:00
|
|
|
|
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)
|
|
|
|
|
|
|
|
|
|
|
2023-02-28 07:18:06 +00:00
|
|
|
|
that.WebScanController.modifyImage(currentIndex, dataUrl, {}, function (info) {
|
2022-06-17 02:51:29 +00:00
|
|
|
|
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)
|
|
|
|
|
}
|
|
|
|
|
|
2023-11-14 08:33:20 +00:00
|
|
|
|
// console.log('当前扫描参数:' + JSON.stringify(this.scanParams))
|
|
|
|
|
// console.log('当前强强强扫描参数:' + JSON.stringify(paramsRange))
|
2022-06-17 02:51:29 +00:00
|
|
|
|
|
|
|
|
|
this.$forceUpdate()
|
2022-07-29 08:29:30 +00:00
|
|
|
|
},
|
2022-06-17 02:51:29 +00:00
|
|
|
|
// 将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
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|