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 }, //上传配置 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 }, //水印信息 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++) { if (group[j].value != undefined) { 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)) 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() }) }) }, //文件上传 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)) }) } }, /*******************************************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() }, // 将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 } } } })