lmh188
/
dpkg
mirror of http://192.168.10.4:8099/sane/dpkg.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
dpkg/uos/lscweb/opt/lanxumwebscan/static/js/scanWeb.js

2428 lines
97 KiB
JavaScript
Executable File
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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
}
}
}
})
Reference in New Issue View Git Blame Copy Permalink