lmh188
/
code_app
mirror of http://192.168.10.5:8099/sane/code_app.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
code_app/test/webservice/webdemoproject/js/scanWeb.js

2858 lines
114 KiB
JavaScript
Raw Normal View History

提交websdk vue demo
2022-06-17 02:51:29 +00:00
new Vue({
el: "#container",
data: {
canvas: null,
image: null,//左侧选中的图像
scale: 1,
angle: 0,
totalAngle: 0,
rectificationDialog: false,
repSliderValue: 0,
selectImageObj: {
// "image": image,
// "index": index,
//"thumbnail":thumbnail
index: -1
},
redoStack: [],
undoStack: [],
startP: null,
assistLine: null,
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
assistText: null,//水印辅助提示对象
markText: null,//水印文本对象
提交websdk vue demo
2022-06-17 02:51:29 +00:00
selectManyImages: [],
urls: [/*{
path: 'fake://fake.jpg',
websdk demo增加去底色、文本增强等功能
2024-03-28 05:32:33 +00:00
base64: '',//加载了原图才有
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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:从指定位置开始往后覆盖或者添加
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
curInsertIndex: -1,//顺序扫描 当前需要插入的位置
curCoverIndex: -1,//覆盖扫描 当前需要覆盖扫描的位置
提交websdk vue demo
2022-06-17 02:51:29 +00:00
needCoverCount: -1,//当前需要覆盖扫描的数量
isSetup: false,//是否显示参数设置框
activeName: '1',//设置框的tab位
devices: [],//获取到的设备列表
currDevice: '',//当前选中的设备
deviceOpened: false,//是否已经打开了设备
deviceInited: false,//是否已经初始化了设备
batchIdList: [],//批次列表
showBatchList: true,//是否显示批次列表选择界面
showExportType: true,//是否显示导出文件列表选择界面
currentBatch: '',//当前是哪个批次
isScanning: false,//是否正在扫描中
bindFolderPath: '',//绑定的文件夹
showWaterMark: false,//是否显示水印配置项
showWaterMarkPosition: false,//是否显示水印xy位置
showBatchMarkConfigure: false,//是否显示批量添加水印框
scanParams: {//扫描参数
color_mode: 'color',//"color","gray","binary","auto"
page_mode: 'duplex',//"simplex","duplex","filter_blank_general","filter_blank_invoice","fold_in_half"
resolution: 200,//dpi 100,150,200,240,300
brightness: 100,//亮度 1~255
contrast: 4,//对比度 1~7
gamma: 1.00,//伽马值 0.01~5.00
paper_size: 'a4',//纸张尺寸 "a3","a4","a4_horz","auto"
paper_cut_enabled: false,//是否裁剪
paper_cut_left: 0.0,//单位毫米
paper_cut_top: 0.0,//
paper_cut_right: 210.0,//
paper_cut_bottom: 297.0,//
auto_crop: false//是否纠偏
},
//扫描参数的范围，后面根据实际获取到的覆盖更新
scanParamsRange: {
color_mode_list: ["color", "gray", "binary", "auto"],
page_mode_list: ["simplex", "duplex", "filter_blank_general", "filter_blank_invoice", "fold_in_half"],
resolution_list: [100, 150, 200, 240, 300],
brightness_min: 1,
brightness_max: 255,
contrast_min: 1,
contrast_max: 7,
gamma_min: 0.01,
gamma_max: 5.00,
paper_size_list: ["a3", "a4", "a4_horz", "auto"],
paper_size_width: 210.0,
paper_size_height: 297.0
},
//全局配置
globalConfig: {
file_save_path: 'C:\\', // 默认是文档目录
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
file_name_prefix: 'Doc', // 文件名前缀
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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
},
更新websdk demo
2022-07-29 08:29:30 +00:00
//上传配置
uploadConfig: {
remote_file_path: '/images',
upload_mode: 'none',
http_host: '',
http_port: 80,
http_path: '/upload.cgi',
ftp_user: 'administrator',
ftp_password: '2018',
ftp_host: '192.168.0.22',
ftp_port: 21
},
提交websdk vue demo
2022-06-17 02:51:29 +00:00
//水印信息
waterMarkInfo: {
text: '0001',
text_color: '#000000',
text_opacity: 100, // 不透明度
text_pos: 'left', // 可以是left、right、top、bottom、left_top、right_top、left_bottom、right_bottom、center和location
margin_left: 10, // 左边距
margin_top: 10, // 上边距
margin_right: 10, // 右边距
margin_bottom: 10, // 下边距
location_x: 100, // x坐标
location_y: 100, // y 坐标
font_name: '宋体', // 字体名
font_size: 20, // 字号
font_bold: false, // 粗体
font_underline: false, // 下划线
font_italic: false, // 斜体
font_strikeout: false, // 删除线
},
waterMarkPositionList: ['底部居中', '顶部居中', '居中', '左侧居中', '右侧居中', '左上角', '左下角', '右上角', '右下角', '绝对位置XY'],
waterMarkPositionSignList: ['bottom', 'top', 'center', 'left', 'right', 'left_top', 'left_bottom', 'right_top', 'right_bottom', 'location'],
markPosition: 'bottom',
markAbsoluteX: 0,//绝对位置X
markAbsoluteY: 0,//绝对位置Y
markMarginTop: 0,
markMarginLeft: 0,
markMarginRight: 0,
markMarginBottom: 0,
markInsertRange: [0, 0],
markFontNameList: ['宋体'],
markFontSizeList: [],
markFontName: '宋体',
markFontSize: 20,
markFontBold: false,
markFontUnderline: false,
markFontItalic: false,
markFontStrikeout: false,
waterMarkText: '',
markFontColor: '#000000',
markPredefineColors: [
'#000000',
'#ffffff',
'#ff4500',
'#ff8c00',
'#ffd700',
'#90ee90',
'#00ced1',
'#1e90ff',
'#c71585',
],
markPositionTipX: 0,//提示X
markPositionTipY: 0,//提示Y
websdk demo增加去底色、文本增强等功能
2024-03-28 05:32:33 +00:00
showEditImageDialog: false,//对单张图片进行不可撤回的编辑
originEditImageData: {index: -1, imageBase64: ''},//单张图片编辑前的原图
editedImageData: '', //单张图片编辑后的原图
isAdjustColors: true, //单张图片编辑:是否调整颜色 亮度对比度 gamma
colorAdjustParams: {
brightness: 0, // 亮度，取值-255值255之间
contrast: 0, // 饱和度，取值-127至127之间
gamma: 1.0, // 伽马，取值0.1值5.0之间
}, //单张图片编辑:调整颜色参数 亮度对比度 gamma
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
insertQueue: [{
insertType: -1,// 插入类型 -1占位啥都没有 1.加到末尾 2.插入到指定位置 3.覆盖指定位置图片
imagePath: '',//插入图像的路径
insertIndex: 0, //插入位置
idenInfo: {},//签名
}],//插入队列，等待结果返回再继续插入
insertLoopWork: Number,
提交websdk vue demo
2022-06-17 02:51:29 +00:00
},
created: function () {
window.eleLoadding = this.eleLoadding;
window.eleAlert = this.eleMessage;
window.scanCallBack = this.scanCallBack;
window.setupWindowCallBack = this.setupWindowCallBack
window.socketCallBack = this.onSocketCallBack
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
window.onbeforeunload = this.onCloseScreen
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this;
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
this.insertQueue.length = 0
this.insertLoopWork = setInterval(() => {
//首位不是占位数据的
if (that.insertQueue.length > 0 && that.insertQueue[0].insertType !== -1) {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
//先取出队列的第一位
var insertInfo = that.insertQueue.splice(0, 1)
// console.log('循环任务：' + JSON.stringify(insertInfo))
// var insertInfo = that.insertQueue[0]
console.log('loop work：' + insertInfo[0].insertType + ' ' + insertInfo[0].imagePath)
//先取出队列的第一位
// that.insertQueue.splice(0, 1)
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
//插入占位数据
that.insertQueue.splice(0, 0, {insertType: -1})
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
that.insertAction(insertInfo[0])
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
}
}, 400);
提交websdk vue demo
2022-06-17 02:51:29 +00:00
},
mounted: function () {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var canvasContainer = $("#canvas-container")
var width = canvasContainer.width();
var height = canvasContainer.height();
提交websdk vue demo
2022-06-17 02:51:29 +00:00
console.log('canvas width:' + width + ' height:' + height)
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var canvas = new fabric.Canvas(
提交websdk vue demo
2022-06-17 02:51:29 +00:00
'imageCanvas',
{
allowTouchScrolling: true,
centeredRotation: true,
centeredScaling: true,
defaultCursor: 'default',
hoverCursor: 'default',
backgroundColor: "#ffffff",
backgroundVpt: true,
width: width,
height: height
}
);
this.canvas = canvas;
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this
canvas.on('mouse:out', function (options) {
console.log('Mouse out of canvas');
// if (that.markText) {
// canvas.remove(that.markText)
// }
if (that.assistText) {
canvas.remove(that.assistText)
}
if (that.assistLine) {
canvas.remove(that.assistLine)
}
});
提交websdk vue demo
2022-06-17 02:51:29 +00:00
this.markFontSizeList.length = 0
//添加可选字体大小
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
for (var i = 11; i < 51; i++) {
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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) {
switch (info.code) {
case SOCKET_CONNECTED://连接成功
this.connectEnable = false
this.initData()
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
console.log('socket connected')
提交websdk vue demo
2022-06-17 02:51:29 +00:00
break
case SOCKET_DISCONNECTED://断开连接
this.connectEnable = true
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
console.log('socket disconnect ！！！')
提交websdk vue demo
2022-06-17 02:51:29 +00:00
break
case SOCKET_EVENT://其他事件
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var parsedInfo = JSON.parse(info.data)
this.dispatchEvent(parsedInfo)
if (parsedInfo.func) {
if (parsedInfo.func === 'scan_image') {
console.log('socket received scan_image image_path:' + parsedInfo.image_path)
} else if (parsedInfo.func === 'insert_local_image') {
console.log('socket received insert_local_image')
} else if (parsedInfo.func === 'modify_image') {
console.log('socket received modify_image')
} else {
console.log('socket received: ' + info.data)
}
}
提交websdk vue demo
2022-06-17 02:51:29 +00:00
break
}
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
// this.appendLog(msg)
提交websdk vue demo
2022-06-17 02:51:29 +00:00
},
dispatchEvent: function (info) {
if (info.func) {
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
if (info.func === 'is_device_init' || info.func === 'get_curr_device_name') {
//单独处理 ret 0 初始化了 非0 未初始化
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var funcName = this.WebScanController.getCallBack(info.func)
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
if (funcName) {
funcName(info)
}
} else {
if (info.ret != null && info.ret != undefined) {
if (info.ret == 0) {//返回成功
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var funcName = this.WebScanController.getCallBack(info.func)
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
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()
}
提交websdk vue demo
2022-06-17 02:51:29 +00:00
}
}
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
} else {
this.commonDispatch(info)
提交websdk vue demo
2022-06-17 02:51:29 +00:00
}
}
}
},
commonDispatch: function (info) {//较通用事件处理
this.eleUnloadding()
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
// console.log('commonDispatch：', JSON.stringify(info))
提交websdk vue demo
2022-06-17 02:51:29 +00:00
if (info) {
switch (info.func) {
case "device_arrive"://设备装载
this.eleMessage("设备已装载")
break
case "device_remove"://设备卸载
this.eleMessage("设备已移除！")
this.deinitDevices()
this.deviceOpened = false
this.deviceInited = false
this.devices.length = 0
this.currDevice = null
break
case "scan_begin"://开始扫描信号
this.isScanning = true
this.eleMessage("开始扫描")
this.eleLoadding()
break
case "scan_end"://扫描结束
this.isScanning = false
this.clearCanvasData()
this.eleMessage("扫描结束")
clearInterval(window.loopinterval)
this.eleUnloadding()
break
case "scan_info":
// {
// “is_error”:false,// 是否是错误消息
// “info”:”start scanning” // 消息内容
// }
this.eleMessage(info.info, info.is_error ? 'error' : 'warning')
break
case "scan_image"://图片回调
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var imagePath = info.image_path
解决websdk demo扫描图片错位的问题
2023-02-28 07:18:06 +00:00
提交websdk vue demo
2022-06-17 02:51:29 +00:00
if (this.scanMode == 'insert') {//是插入扫描
this.curCoverIndex = -1
//找到文件位置，插入元素
if (this.curInsertIndex != -1) {
} else {
this.curInsertIndex = this.selectImageObj.index
}
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
console.log('插入扫描：队列插入位:' + this.curInsertIndex + " path:" + imagePath)
this.insertQueue.push({
insertType: 2,
imagePath: imagePath,
insertIndex: this.curInsertIndex,
idenInfo: {
insertType: 2,
insertIndex: this.curInsertIndex,
path: imagePath,
base64: info.image_base64
},//签名
})
this.curInsertIndex++
} else if (this.scanMode == 'cover') {//是覆盖扫描
console.log('覆盖扫描，起始位index' + this.curCoverIndex + ' imagePath:' + imagePath + ' 总长度位置：' + (this.urls.length - 1))
console.log('需要覆盖的数量：' + this.needCoverCount)
this.insertQueue.push({
insertType: 3,
imagePath: imagePath,
idenInfo: {
insertType: 3,
解决websdk demo扫描图片错位的问题
2023-02-28 07:18:06 +00:00
path: imagePath,
提交websdk vue demo
2022-06-17 02:51:29 +00:00
base64: info.image_base64
解决websdk demo扫描图片错位的问题
2023-02-28 07:18:06 +00:00
},
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
})
} else {//正常按顺序
提交websdk vue demo
2022-06-17 02:51:29 +00:00
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
this.curCoverIndex = -1
提交websdk vue demo
2022-06-17 02:51:29 +00:00
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
console.log('顺序扫描，队列插入位' + this.curInsertIndex + ' imagePath:' + imagePath)
提交websdk vue demo
2022-06-17 02:51:29 +00:00
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
this.insertQueue.push({
insertType: 1,
imagePath: imagePath,
insertIndex: this.curInsertIndex,
idenInfo: {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
insertType: 1,
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
path: imagePath,
insertIndex: this.curInsertIndex,
base64: info.image_base64
},//签名
})
this.curInsertIndex++
}
break
}
}
},
//扫描展示逻辑
insertAction: function (info) {
提交websdk vue demo
2022-06-17 02:51:29 +00:00
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
/* {
insertType: 1,
imagePath: imagePath,
insertIndex: this.insertIndex,
idenInfo: {
insertType: 2,
path: imagePath,
insertIndex: this.insertIndex,
base64: info.image_base64
}*/
提交websdk vue demo
2022-06-17 02:51:29 +00:00
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this
提交websdk vue demo
2022-06-17 02:51:29 +00:00
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
if (info.insertType === 3) {//是覆盖扫描逻辑
提交websdk vue demo
2022-06-17 02:51:29 +00:00
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
if (this.needCoverCount > 0) {//还在覆盖范围内，直接覆盖掉
this.WebScanController.modifyImage(this.curCoverIndex, info.idenInfo.base64, info.idenInfo, function (modifyInfo) {
提交websdk vue demo
2022-06-17 02:51:29 +00:00
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var idenInfo = JSON.parse(modifyInfo.iden);
提交websdk vue demo
2022-06-17 02:51:29 +00:00
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
console.log('覆盖前：index==' + that.curCoverIndex + ' path:' + that.urls[that.curCoverIndex].path)
提交websdk vue demo
2022-06-17 02:51:29 +00:00
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
that.urls[that.curCoverIndex] = {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
// base64: idenInfo.base64,
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
thumbnail: idenInfo.base64,
path: idenInfo.path
}
console.log('覆盖后：index==' + that.curCoverIndex + ' path:' + that.urls[that.curCoverIndex].path)
解决websdk demo扫描图片错位的问题
2023-02-28 07:18:06 +00:00
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
that.curCoverIndex++
that.needCoverCount--
解决websdk demo扫描图片错位的问题
2023-02-28 07:18:06 +00:00
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
that.$forceUpdate()
//把占位符删掉 继续下一轮循环
if (that.insertQueue.length > 0 && that.insertQueue[0].insertType === -1) {
that.insertQueue.splice(0, 1)
}
})
} else {//之后都是新增的往后添加了
this.WebScanController.insertLocalImage(info.imagePath, this.urls.length, info.idenInfo, function (result) {
console.log('覆盖扫描：插入成功 index：' + that.urls.length)
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var idenInfo = JSON.parse(result.iden);
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
that.urls.push({
path: idenInfo.path,
thumbnail: idenInfo.base64,
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
// base64: idenInfo.base64
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
})
that.$forceUpdate()
that.$nextTick(function () {
if (that.$refs.imageArea) {
that.$refs.imageArea.scrollTop = that.$refs.imageArea.scrollHeight
}
})
解决websdk demo扫描图片错位的问题
2023-02-28 07:18:06 +00:00
提交websdk vue demo
2022-06-17 02:51:29 +00:00
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
//把占位符删掉 继续下一轮循环
if (that.insertQueue.length > 0 && that.insertQueue[0].insertType === -1) {
that.insertQueue.splice(0, 1)
提交websdk vue demo
2022-06-17 02:51:29 +00:00
}
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
})
提交websdk vue demo
2022-06-17 02:51:29 +00:00
}
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
} else {
this.WebScanController.insertLocalImage(info.imagePath, info.insertIndex, info.idenInfo, function (result) {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var idenInfo = JSON.parse(result.iden);
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
if (idenInfo.insertType === 1) {
//正常扫描，往后添加
console.log('正常扫描：插入成功 index：' + idenInfo.insertIndex + ' path:' + idenInfo.path)
//插入到正确位置
that.urls.splice(idenInfo.insertIndex, 0, {
path: idenInfo.path,
thumbnail: idenInfo.base64,
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
// base64: idenInfo.base64
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
})
that.$nextTick(function () {
if (that.$refs.imageArea) {
that.$refs.imageArea.scrollTop = that.$refs.imageArea.scrollHeight
}
})
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
} else if (idenInfo.insertType === 2) {
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
//插入扫描，指定位置
console.log('插入扫描：插入index' + idenInfo.insertIndex + ' path:' + idenInfo.path)
//插入到正确位置
that.urls.splice(idenInfo.insertIndex, 0, {
path: idenInfo.path,
thumbnail: idenInfo.base64,
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
// base64: idenInfo.base64
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
})
that.$forceUpdate()
}
//把占位符删掉 继续下一轮循环
if (that.insertQueue.length > 0 && that.insertQueue[0].insertType === -1) {
that.insertQueue.splice(0, 1)
}
})
提交websdk vue demo
2022-06-17 02:51:29 +00:00
}
},
//一些初始化操作
initData: function () {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this
提交websdk vue demo
2022-06-17 02:51:29 +00:00
this.getGlobalConfig()
this.getBatchList(function () {
that.changeBatch(that.batchIdList.slice(-1)[0])
})
},
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
//界面销毁
onCloseScreen: function () {
this.releaseService()
if (this.insertLoopWork) {
clearInterval(this.insertLoopWork)
}
},
提交websdk vue demo
2022-06-17 02:51:29 +00:00
//关闭服务
releaseService: function () {
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
console.log('releaseService')
提交websdk vue demo
2022-06-17 02:51:29 +00:00
this.deinitDevices()
// this.stopBindFolder()
if (this.WebScanController) {
this.WebScanController.disconnect()
}
},
/*******************************************扫描仪控制***************************************************************/
//获取全局参数
getGlobalConfig: function () {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this
提交websdk vue demo
2022-06-17 02:51:29 +00:00
this.WebScanController.getGlobalConfig(function (info) {
console.log('getGlobalConfig :' + info)
that.globalConfig = info
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var pre = info.file_save_path
提交websdk vue demo
2022-06-17 02:51:29 +00:00
if (pre.endsWith("\\")) {
that.bindFolderPath = pre + 'auto'
} else {
that.bindFolderPath = pre + '\\auto'
}
that.bindFolder()
})
},
//设置全局参数
setGlobalConfig: function () {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this
提交websdk vue demo
2022-06-17 02:51:29 +00:00
this.WebScanController.setGlobalConfig(this.globalConfig, function (info) {
that.eleMessage("设置全局配置成功")
})
},
//初始化设备
initDevice: function (succcallBack) {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
this.WebScanController.isDeviceInit(function (info) {
console.log('isDeviceInit:' + JSON.stringify(info))
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
if (info.ret === 0) {
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
//已经初始化
that.deviceInited = true
if (succcallBack != null) {
succcallBack()
}
} else {
//没有初始化
console.log('start device init ' + new Date().getTime())
that.WebScanController.initDevice(function (info) {
console.log('init devices :' + JSON.stringify(info) + ' ' + new Date().getTime())
that.deviceInited = true
if (succcallBack != null) {
succcallBack()
}
})
提交websdk vue demo
2022-06-17 02:51:29 +00:00
}
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
提交websdk vue demo
2022-06-17 02:51:29 +00:00
})
},
//反初始化设备（需初始化后调用）
deinitDevices: function () {
if (this.deviceInited == false) {
return
}
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this
提交websdk vue demo
2022-06-17 02:51:29 +00:00
this.WebScanController.deinitDevices(function (info) {
console.log('deinit Devices :' + info)
that.deviceInited = false
that.deviceInited = false
})
},
//获取设备列表
getDeviceNameList: function () {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this
提交websdk vue demo
2022-06-17 02:51:29 +00:00
this.WebScanController.getDeviceNameList(function (info) {
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
console.log('getDeviceNameList :' + JSON.stringify(info))
提交websdk vue demo
2022-06-17 02:51:29 +00:00
if (info.device_name_list) {//反初始化成功
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
for (var i = 0; i < info.device_name_list.length; i++) {
提交websdk vue demo
2022-06-17 02:51:29 +00:00
console.log('getDeviceNameList index:' + i + " item:" + info.device_name_list[i])
}
that.devices = info.device_name_list
}
})
},
//打开设备
openDevice: function (deviceName) {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
this.WebScanController.getCurrDeviceName(function (info) {
console.log('getCurrDeviceName:' + JSON.stringify(info))
if (info.device_name) {
that.deviceOpened = true
that.eleLoadding()
that.getScanParams()
} else {
that.WebScanController.openDevice(deviceName, function (info) {
console.log('open devices :' + JSON.stringify(info))
that.deviceOpened = true
that.eleLoadding()
that.getScanParams()
})
}
提交websdk vue demo
2022-06-17 02:51:29 +00:00
})
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
提交websdk vue demo
2022-06-17 02:51:29 +00:00
},
//关闭设备
closeDevice: function () {
if (this.deviceOpened == false) {
return
}
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this
提交websdk vue demo
2022-06-17 02:51:29 +00:00
this.WebScanController.closeDevice(function (info) {
console.log('close devices :' + info)
that.deviceOpened = false
})
},
//设置扫描参数
setScanParams: function () {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this
提交websdk vue demo
2022-06-17 02:51:29 +00:00
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var ori = this.scanParams
var result = new Array()
for (var i = 0; i < ori.length; i++) {
var group = ori[i].group_param
for (var j = 0; j < group.length; j++) {
更新websdk demo
2022-07-29 08:29:30 +00:00
if (group[j].value != undefined) {
result.push({
name: group[j].name,
value: group[j].value
})
}
提交websdk vue demo
2022-06-17 02:51:29 +00:00
}
}
this.WebScanController.setScanParams(result, function (info) {
that.eleMessage("设置扫描参数成功")
})
},
//获取扫描参数
getScanParams: function () {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this
提交websdk vue demo
2022-06-17 02:51:29 +00:00
this.WebScanController.getScanParams(function (info) {
that.eleUnloadding()
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
// console.log('获取到的扫描参数 ：' + JSON.stringify(info))
提交websdk vue demo
2022-06-17 02:51:29 +00:00
that.scanParamsRange = info.device_param
that.parameterCoerceIn()
})
},
//重设扫描参数
resetScanParams: function () {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this
提交websdk vue demo
2022-06-17 02:51:29 +00:00
this.WebScanController.resetScanParams(function (info) {
console.log('重置参数成功！')
that.getScanParams()
that.$alert('扫描参数已重置！', '提示', {
confirmButtonText: '确定'
});
})
},
// setScanParams: function () {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
// var that = this
提交websdk vue demo
2022-06-17 02:51:29 +00:00
// this.WebScanController.setScanParams(this.scanParams, function (info) {
// console.log('setScanParams :' + info)
// that.eleMessage("设置扫描参数成功")
// })
// },
//获取扫描参数
// getScanParams: function () {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
// var that = this
提交websdk vue demo
2022-06-17 02:51:29 +00:00
// 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 () {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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'
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
this.curInsertIndex = this.urls.length
提交websdk vue demo
2022-06-17 02:51:29 +00:00
this.WebScanController.startScan(function (info) {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
提交websdk vue demo
2022-06-17 02:51:29 +00:00
})
},
//插入扫描
insertScan: function () {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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;
}
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this
提交websdk vue demo
2022-06-17 02:51:29 +00:00
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
this.curInsertIndex = -1
this.curCoverIndex = this.selectImageObj.index
this.needCoverCount = this.urls.length - this.curCoverIndex
提交websdk vue demo
2022-06-17 02:51:29 +00:00
this.WebScanController.startScan(function (info) {
console.log('覆盖扫描')
that.scanMode = 'cover'
})
},
//停止扫描
stopScan: function () {
this.WebScanController.stopScan(function (info) {
console.log('stopScan :' + info)
})
},
//保存扫描仪参数
saveParams: function () {
this.isSetup = false
this.setGlobalConfig()
this.setScanParams()
this.bindFolder()
},
onDeviceChanged: function (deviceName) {
this.closeDevice()
this.openDevice(deviceName)
},
openDeviceSetting: function () {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
console.log('准备打开设置')
提交websdk vue demo
2022-06-17 02:51:29 +00:00
if (this.deviceInited == true) {
this.isSetup = true
} else {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this
console.log('准备初始化设备...')
提交websdk vue demo
2022-06-17 02:51:29 +00:00
this.initDevice(function () {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
console.log('初始化设备结束')
提交websdk vue demo
2022-06-17 02:51:29 +00:00
that.isSetup = true
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
setTimeout(function () {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
console.log('准备获取设备列表...')
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
that.getDeviceNameList()
}, 500);
提交websdk vue demo
2022-06-17 02:51:29 +00:00
})
}
},
/*******************************************文件管理***************************************************************/
//获取最后批次的内容
getBatchList: function (succeccCallBack) {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this
提交websdk vue demo
2022-06-17 02:51:29 +00:00
this.WebScanController.getBatchIdList(function (info) {
console.log('批次列表：' + JSON.stringify(info))
that.batchIdList.length = 0
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
for (var i = 0; i < info.batch_id_list.length; i++) {
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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))
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this
提交websdk vue demo
2022-06-17 02:51:29 +00:00
this.WebScanController.deleteBatch(batchId, function (info) {
console.log('删除批次成功 batchId：' + batchId + " result:" + JSON.stringify(info))
that.batchIdList.splice(index, 1)
if (that.currentBatch === batchId) {//删除的就是当前批次
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var lastBatchId = that.batchIdList.slice(-1)[0]
提交websdk vue demo
2022-06-17 02:51:29 +00:00
console.log('删除的当前批次，那么重新打开最新的批次：' + lastBatchId)
that.changeBatch(lastBatchId)
}
})
},
//创建新的批次
createNewBatch: function () {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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()
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var id = value.trim()
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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) {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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) {
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
console.log('打开批次：' + JSON.stringify(info))
提交websdk vue demo
2022-06-17 02:51:29 +00:00
that.urls.length = 0//先清空一下
that.currentBatch = batchId
//重新加载
that.reLoadImageList()
})
},
//获取当前批次的图像列表
reLoadImageList: function () {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this
提交websdk vue demo
2022-06-17 02:51:29 +00:00
this.eleLoadding()
this.clearCanvasData()
/* this.WebScanController.getImageCount(function (info) {
that.eleUnloadding()
console.log('当前批次图片数量为：' + JSON.stringify(info))
that.urls = new Array(info.image_count).fill('')
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
for (var i = 0; i < that.urls.length; i++) {
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
for (var i = 0; i < info.image_thumbnail_list.length; i++) {
提交websdk vue demo
2022-06-17 02:51:29 +00:00
that.urls.push({
path: '',
base64: '',
thumbnail: info.image_thumbnail_list[i].image_base64//缩略图
})
}
that.$forceUpdate()
})
},
modifyBatchId: function (originBatchId, index) {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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()
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var id = value.trim()
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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 () {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this
提交websdk vue demo
2022-06-17 02:51:29 +00:00
this.WebScanController.clearImageList(function (info) {
that.eleMessage('清空图像列表成功！')
console.log('清空图像列表：' + JSON.stringify(info))
that.urls.length = 0
that.image = null
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
that.canvas.clear()
提交websdk vue demo
2022-06-17 02:51:29 +00:00
that.$forceUpdate()
})
},
deleteSelectedImage: function () {
if (this.selectImageObj == null || this.selectImageObj.image == null ||
this.selectImageObj.image.base64 == undefined) {
this.eleMessage("请至少选择一张需要删除的图像", "warning");
return;
}
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var deleteList = this.selectManyImages
提交websdk vue demo
2022-06-17 02:51:29 +00:00
console.log('删除列表：' + deleteList)
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this
提交websdk vue demo
2022-06-17 02:51:29 +00:00
this.WebScanController.deleteImage(deleteList, function (info) {
that.image = null
that.selectManyImages.sort(function (a, b) {
return a - b
})
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
for (var i = that.selectManyImages.length - 1; i >= 0; i--) {
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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;
}
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this;
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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
}
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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
})
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
for (var i = that.selectManyImages.length - 1; i >= 0; i--) {
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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
}
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var firstIndex = this.selectManyImages[0]
var secondIndex = this.selectManyImages[1]
提交websdk vue demo
2022-06-17 02:51:29 +00:00
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this
提交websdk vue demo
2022-06-17 02:51:29 +00:00
this.WebScanController.exchangeImage(firstIndex, secondIndex, function (info) {
console.log('图片交换成功！' + JSON.stringify(info))
that.clearCanvasData()
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var firstData = that.urls[firstIndex]
var secondData = that.urls[secondIndex]
提交websdk vue demo
2022-06-17 02:51:29 +00:00
that.urls[firstIndex] = secondData
that.urls[secondIndex] = firstData
that.$forceUpdate()
})
},
//导出全部图片为指定文件类型
exportFile: function (fileType) {
if (this.urls.length == 0) {
this.eleMessage('请先扫描！', 'warning')
return
}
this.eleLoadding()
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var imageIndexList = []
提交websdk vue demo
2022-06-17 02:51:29 +00:00
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
for (var i = 0; i < this.urls.length; i++) {
提交websdk vue demo
2022-06-17 02:51:29 +00:00
imageIndexList.push(i)
}
console.log('待导出文件index:' + imageIndexList)
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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()
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var fileName = that.currentBatch + "." + fileType
提交websdk vue demo
2022-06-17 02:51:29 +00:00
console.log('导出文件成功：' + JSON.stringify(info))
that.downloadBase64File(info.image_base64, fileName)
})
}
},
//添加水印
addWaterMarkWithBatch: function () {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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) {//只选择了一页
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var modifyIndex = that.markInsertRange[0] - 1
提交websdk vue demo
2022-06-17 02:51:29 +00:00
that.WebScanController.imageAddWatermark(modifyIndex, that.waterMarkInfo, true, function (info) {
console.log('添加水印成功：')
解决websdk demo扫描图片错位的问题
2023-02-28 07:18:06 +00:00
that.WebScanController.modifyImage(modifyIndex, info.image_base64, {}, function (modifyInfo) {
提交websdk vue demo
2022-06-17 02:51:29 +00:00
console.log('添加水印：修改' + modifyIndex + '成功：')
that.urls[modifyIndex].thumbnail = info.image_base64
that.urls[modifyIndex].base64 = info.image_base64
that.selectImage(that.urls[modifyIndex], modifyIndex)
that.$forceUpdate()
})
})
} else {//选择了多张
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var startIndex = that.markInsertRange[0] - 1
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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) {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this
提交websdk vue demo
2022-06-17 02:51:29 +00:00
this.WebScanController.imageAddWatermark(imageIndex, markInfoParams, true, function (markInfo) {
console.log('多张添加水印成功：index：' + imageIndex)
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var resultImage = markInfo.image_base64
解决websdk demo扫描图片错位的问题
2023-02-28 07:18:06 +00:00
that.WebScanController.modifyImage(imageIndex, resultImage, {}, function (modifyInfo) {
提交websdk vue demo
2022-06-17 02:51:29 +00:00
console.log('多张添加水印：修改' + imageIndex + '成功：')
that.urls[imageIndex].thumbnail = resultImage
that.urls[imageIndex].base64 = resultImage
that.selectImage(that.urls[imageIndex], imageIndex)
that.$forceUpdate()
succCallBack()
})
})
},
更新websdk demo
2022-07-29 08:29:30 +00:00
//文件上传
uploadFile: function () {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var data = this.urls
更新websdk demo
2022-07-29 08:29:30 +00:00
if (data.length == 0) {
this.eleMessage('请先扫描！')
return
}
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
for (var index = 0; index < data.length; index++) {
var path = data[index].path
更新websdk demo
2022-07-29 08:29:30 +00:00
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var config = this.uploadConfig
更新websdk demo
2022-07-29 08:29:30 +00:00
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var fileName = path.slice(path.lastIndexOf('\\') + 1, path.length)
更新websdk demo
2022-07-29 08:29:30 +00:00
if (fileName.length == 0) {
fileName = this.currentBatch + '-' + index + ".jpg"
}
console.log('fileName:' + fileName)
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var remoteFilePath = config.remote_file_path
更新websdk demo
2022-07-29 08:29:30 +00:00
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))
})
}
},
提交websdk vue demo
2022-06-17 02:51:29 +00:00
/*******************************************canvas图像处理***************************************************************/
selectImage: function (image, index) {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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) {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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");
},
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
//图片大小自适应
提交websdk vue demo
2022-06-17 02:51:29 +00:00
ajustDimensions: function ($event) {
if (this.image == null || this.image == undefined) {
this.$message.warning('请选择图像进行操作');
return;
}
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
this.addOptActive($event);
this.clearDivListener();
提交websdk vue demo
2022-06-17 02:51:29 +00:00
var width = $("#canvas-container").width() - 4;
var height = $("#canvas-container").height() - 4;
var zoom = Math.min(width / this.image.width, height / this.image.height);
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
//图像缩放
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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();
},
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
loadImageToCanvas: function (imageSrc, realDimensions) {
提交websdk vue demo
2022-06-17 02:51:29 +00:00
this.clearDivListener()
this.canvas.clear()
this.canvas.setZoom(1)
this.scale = 1
this.angle = 0
this.totalAngle = 0
this.canvas.discardActiveObject()
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this
解决websdk demo扫描图片错位的问题
2023-02-28 07:18:06 +00:00
// console.log('准备加载图像到画布：' + JSON.stringify(imageSrc))
提交websdk vue demo
2022-06-17 02:51:29 +00:00
new fabric.Image.fromURL(imageSrc ? imageSrc.base64 : null, function (image) {
解决websdk demo扫描图片错位的问题
2023-02-28 07:18:06 +00:00
// console.log('加载图像：image===' + image)
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var result = imageSrc ? image : null
提交websdk vue demo
2022-06-17 02:51:29 +00:00
that.image = result
that.canvas.add(image)
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
if (realDimensions) {
that.realDimensions(null, false)
} else {
//太小了还是展示原图
if (image.width < 1200 || image.height < 1200) {
that.realDimensions(null, false)
} else {
that.ajustDimensions()
}
}
提交websdk vue demo
2022-06-17 02:51:29 +00:00
}, {
selectable: false
})
$(".canvas-container").css("border", "2px solid #e1e1e1")
},
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
//图片实际大小
提交websdk vue demo
2022-06-17 02:51:29 +00:00
realDimensions: function ($event, withActive) {
if (withActive) {
if (this.image == null || this.image == undefined) {
this.$message.warning('请选择图像进行操作');
return;
}
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
this.addOptActive($event);
this.clearDivListener();
提交websdk vue demo
2022-06-17 02:51:29 +00:00
}
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;
}
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
if (!this.checkCanDo()) {
return;
}
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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)
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var currentIndex = that.selectImageObj.index
提交websdk vue demo
2022-06-17 02:51:29 +00:00
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var location = Math.floor(isHorizontal ? that.assistLine.x1 : that.assistLine.y1)
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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) {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var firstBase64 = info.image_base64_list[0]
var secondBase64 = info.image_base64_list[1]
提交websdk vue demo
2022-06-17 02:51:29 +00:00
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var firstPath = info.image_path_list[0]
var secondPath = info.image_path_list[1]
提交websdk vue demo
2022-06-17 02:51:29 +00:00
解决websdk demo扫描图片错位的问题
2023-02-28 07:18:06 +00:00
that.WebScanController.modifyImage(currentIndex, secondBase64, {}, function (info) {
提交websdk vue demo
2022-06-17 02:51:29 +00:00
console.log('图像拆分：第二张修改成功...')
that.urls[currentIndex] = {
base64: secondBase64,
thumbnail: secondBase64,
path: secondPath
}
that.WebScanController.insertImage(firstBase64, currentIndex, function (info) {
console.log('图像拆分：第一张插入成功...')
that.eleMessage('图像拆分成功！')
that.urls.splice(currentIndex, 0, {
base64: firstBase64,
thumbnail: firstBase64,
path: firstPath
})
})
})
} else {
that.eleMessage('图像返回异常！')
}
})
} else {
that.canvas.remove(that.assistLine);
that.canvas.remove(that.assistText);
}
}
});
})
})
},
clearCanvasData: function () {
this.image = null
this.selectImageObj = {index: -1}
this.undoStack.length = 0;
this.redoStack.length = 0;
},
scaleMax: function ($event) {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
// var height = this.$refs.canvasContainer.offsetHeight;
// var width = this.$refs.canvasContainer.offsetWidth;
提交websdk vue demo
2022-06-17 02:51:29 +00:00
if (this.image == null || this.image == undefined) {
this.$message.warning('请选择图像进行操作');
return;
}
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
this.addOptActive($event);
this.clearDivListener();
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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) {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
// var height = this.$refs.canvasContainer.offsetHeight;
// var width = this.$refs.canvasContainer.offsetWidth;
提交websdk vue demo
2022-06-17 02:51:29 +00:00
if (this.image == null || this.image == undefined) {
this.$message.warning('请选择图像进行操作');
return;
}
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
this.addOptActive($event);
this.clearDivListener();
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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 (this.image == null || this.image == undefined) {
this.$message.warning('请选择图像进行操作');
return;
}
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
if ($event != undefined) {
this.addOptActive($event);
}
this.clearDivListener();
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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
}
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this;
提交websdk vue demo
2022-06-17 02:51:29 +00:00
// this.angle+=rotate;
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var zoom = this.canvas.getZoom();
var group = new fabric.ActiveSelection(this.canvas.getObjects(), {
提交websdk vue demo
2022-06-17 02:51:29 +00:00
selectable: false,
hasBorders: false,
hasControls: false,
centeredRotation: true,
originX: "center",
originY: "center"
});
this.totalAngle += rotate;
group.rotate(rotate);
//旋转后的角度
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var oldEven = (this.totalAngle / 90) % 2;
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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) {// 纠偏
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
if (this.image == null || this.image == undefined) {
this.$message.warning('请选择图像进行操作');
return;
}
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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) {
if (this.image == null || this.image == undefined) {
this.$message.warning('请选择图像进行操作');
return;
}
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
this.addOptActive($event);
this.clearDivListener();
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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) {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var endPointer = that.canvas.getPointer(e);
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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) {
if (this.image == null || this.image == undefined) {
this.$message.warning('请选择图像进行操作');
return;
}
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
this.redoStack.length = 0;
this.addOptActive($event);
this.clearDivListener();
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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);
})
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();
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
// console.log('save image dataUrl:' + dataUrl)
提交websdk vue demo
2022-06-17 02:51:29 +00:00
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var currIndex = this.selectImageObj.index
this.WebScanController.modifyImage(currIndex, dataUrl, {}, function (info) {
提交websdk vue demo
2022-06-17 02:51:29 +00:00
console.log('修改图像成功：' + JSON.stringify(info))
that.eleUnloadding()
that.undoStack.length = 0;
that.redoStack.length = 0;
//获取选中的一张重新赋值
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
// that.selectImageObj.image.base64 = dataUrl;
that.urls[currIndex].thumbnail = dataUrl
that.urls[currIndex].base64 = dataUrl
that.selectImage(that.urls[currIndex], currIndex)
提交websdk vue demo
2022-06-17 02:51:29 +00:00
})
},
//显示水印配置框
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)
}
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
// if (this.markText != null) {
// this.canvas.remove(this.markText)
// }
提交websdk vue demo
2022-06-17 02:51:29 +00:00
},
//水印文字配置完成
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()
},
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
//往canvas添加文字水印 addBySelf是否自行实现水印该功能
提交websdk vue demo
2022-06-17 02:51:29 +00:00
addWaterMark: function () {
this.realDimensions(null, false)
this.showWaterMarkPosition = true
this.markPositionTipX = 0
this.markPositionTipY = 0
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this
var fontSize = this.waterMarkInfo.font_size
var textColor = this.markFontColor
提交websdk vue demo
2022-06-17 02:51:29 +00:00
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var fontStyle = 'normal'
提交websdk vue demo
2022-06-17 02:51:29 +00:00
if (this.waterMarkInfo.font_italic == true) {
fontStyle = 'italic'
}
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var underline = false
提交websdk vue demo
2022-06-17 02:51:29 +00:00
if (this.waterMarkInfo.font_underline == true) {
underline = true
}
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var linethrough = false
提交websdk vue demo
2022-06-17 02:51:29 +00:00
if (this.waterMarkInfo.font_strikeout == true) {
linethrough = true
}
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var fontWeight = 'normal'
提交websdk vue demo
2022-06-17 02:51:29 +00:00
if (this.waterMarkInfo.font_bold == true) {
fontWeight = 'bold'
}
console.log('font_size:' + fontSize, 'fontStyle:' + fontStyle, 'underline:' + underline, 'linethrough:' + linethrough, 'fontWeight:' + fontWeight)
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var zoom = this.canvas.getZoom()
提交websdk vue demo
2022-06-17 02:51:29 +00:00
fontSize = fontSize * zoom
this.canvas.on("mouse:down", function (ev) {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var pointer = that.canvas.getPointer(ev)
提交websdk vue demo
2022-06-17 02:51:29 +00:00
if (that.assistText != null) {
that.canvas.remove(that.assistText)
}
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
// if (that.markText != null) {
// that.canvas.remove(that.markText)
// }
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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)
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
that.canvas.off("mouse:down")
提交websdk vue demo
2022-06-17 02:51:29 +00:00
that.canvas.on("mouse:move", function (event) {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var movepointer = that.canvas.getPointer(event);
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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,
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
selectable: true,
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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)
})
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
that.canvas.on("mouse:dblclick", function (ev) {
提交websdk vue demo
2022-06-17 02:51:29 +00:00
that.canvas.remove(that.assistText)
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
that.clearDivListener()
})
// 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)
// var currentIndex = that.selectImageObj.index
//
//
// var zoom = that.canvas.getZoom()
// zoom = 1 / zoom;
// var 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);
// })
//
// })
})
},
//图片裁剪
cropImage: function ($event) {
if (this.image == null || this.image == undefined) {
this.$message.warning('请选择图像进行操作');
return;
}
if (!this.checkCanDo()) return;
this.addOptActive($event);
this.clearDivListener();
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) {
var endPointer = that.canvas.getPointer(e);
if (endPointer.x == that.startP.x && endPointer.y == that.startP.y) {
return;
}
that.$confirm('裁剪后不可撤销, 请选择保存类型', '图片裁剪', {
distinguishCancelAndClose: true,
confirmButtonText: '另存为',
cancelButtonText: '覆盖原图'
})
.then(() => {
console.log('另存为')
that.cropImageLogic($event, endPointer, false)
})
.catch(action => {
if (action === 'cancel') {
console.log('覆盖保存')
that.cropImageLogic($event, endPointer, true)
} else {
console.log('取消裁剪')
提交websdk vue demo
2022-06-17 02:51:29 +00:00
}
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
});
});
},
//真正的图片裁剪逻辑 coverSave:覆盖保存
cropImageLogic: function ($event, endPointer, coverSave) {
var that = this
that.eleLoadding()
that.clearDivListener()
提交websdk vue demo
2022-06-17 02:51:29 +00:00
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var currentIndex = that.selectImageObj.index
提交websdk vue demo
2022-06-17 02:51:29 +00:00
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var endPointerX = endPointer.x
var endPointerY = endPointer.y
//限制一下范围
if (endPointerX < 0) {
endPointerX = 0
}
提交websdk vue demo
2022-06-17 02:51:29 +00:00
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
if (endPointerX > that.image.width) {
endPointerX = that.image.width
}
if (endPointerY < 0) {
endPointerY = 0
}
提交websdk vue demo
2022-06-17 02:51:29 +00:00
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
if (endPointerY > that.image.height) {
endPointerY = that.image.height
}
提交websdk vue demo
2022-06-17 02:51:29 +00:00
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
//实际选择的图片像素
var width = Math.abs(endPointerX - that.startP.x);
var height = Math.abs(endPointerY - that.startP.y);
提交websdk vue demo
2022-06-17 02:51:29 +00:00
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var canvasWidth = $("#canvas-container").width();
var canvasHeight = $("#canvas-container").height();
//实际图片宽度/展示出来的宽度
var zoom = that.image.width / that.canvas.width;
var startLeft = that.startP;
startLeft.x = Math.min(endPointerX, startLeft.x)
startLeft.y = Math.min(endPointerY, startLeft.y)
console.log('scale:' + zoom)
提交websdk vue demo
2022-06-17 02:51:29 +00:00
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var targetStartX = startLeft.x / zoom
var targetStartY = startLeft.y / zoom
var targetWidth = width / zoom
var targetHeight = height / zoom
console.log('left top：' + targetStartX + ' ' + targetStartY + ' width：' + targetWidth + ' height：' + targetHeight)
console.log('canvas width:' + canvasWidth + ' canvas height:' + canvasHeight + ' canWidth:' + that.canvas.width + ' canHeight:' + that.canvas.height)
console.log('image width:' + that.image.width + ' image height:' + that.image.height)
var croppedImage = that.canvas.toDataURL({
left: targetStartX, // 指定区域左上角的x坐标
top: targetStartY, // 指定区域左上角的y坐标
width: targetWidth, // 指定区域的宽度
height: targetHeight, // 指定区域的高度
});
new fabric.Image.fromURL(croppedImage, function (result) {
that.image = result
if (coverSave) {
//覆盖保存
that.WebScanController.modifyImage(currentIndex, croppedImage, {}, function (info) {
that.eleUnloadding()
console.log('图片裁剪修改成功')
that.urls[currentIndex].base64 = croppedImage
that.urls[currentIndex].thumbnail = croppedImage
//获取选中的一张重新赋值
that.selectImageObj.image.base64 = croppedImage;
that.undoStack.length = 0;
that.redoStack.length = 0;
that.loadImageToCanvas(that.urls[currentIndex], true)
提交websdk vue demo
2022-06-17 02:51:29 +00:00
})
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
} else {
//另存为
that.WebScanController.insertImage(croppedImage, currentIndex + 1, function (insertInfo) {
that.eleUnloadding()
console.log('图像裁剪另存为：插入图片成功')
// {"func":"insert_image","iden":"gE/rN4vZATMg49y/OCFlZA==","ret":0}
that.urls.splice(currentIndex + 1, 0, {
thumbnail: croppedImage,
base64: croppedImage
提交websdk vue demo
2022-06-17 02:51:29 +00:00
})
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
that.undoStack.length = 0;
that.redoStack.length = 0;
that.selectImage(that.urls[currentIndex + 1], currentIndex + 1)
})
}
}, {
selectable: false
提交websdk vue demo
2022-06-17 02:51:29 +00:00
})
},
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
checkCanDo: function () {
if (this.undoStack.length > 0) {
this.$alert('请先保存对图片的修改', '提示', {
confirmButtonText: '确定',
type: 'warning',
});
return false
} else {
return true
}
},
websdk demo增加去底色、文本增强等功能
2024-03-28 05:32:33 +00:00
//背景消除
backgroundRemoval: function () {
if (!this.isSelectedTargetCountImage(1)) {
this.eleMessage('请选择一张图像进行背景消除')
return
}
var that = this
// that.selectImageObj = {
// "image": image,
// "index": index
// }
this.editedImageData = this.selectImageObj.image.base64
this.originEditImageData = {index: this.selectImageObj.index, imageBase64: this.selectImageObj.image.base64}
this.eleLoadding()
// imageIndex, localSave, getBase64,
that.WebScanController.imageFadebkColor(this.originEditImageData.index, false, true, function (info) {
that.eleUnloadding()
console.log('背景消除成功')
that.showEditImageDialog = true
that.editedImageData = info.image_base64
})
},
//文字加深
binarization: function () {
if (!this.isSelectedTargetCountImage(1)) {
this.eleMessage('请选择一张图像进行文字加深')
return
}
var that = this
// that.selectImageObj = {
// "image": image,
// "index": index
// }
this.editedImageData = this.selectImageObj.image.base64
this.originEditImageData = {index: this.selectImageObj.index, imageBase64: this.selectImageObj.image.base64}
this.eleLoadding()
// imageIndex, localSave, getBase64,
that.WebScanController.imageBinarization(this.originEditImageData.index, false, true, function (info) {
that.eleUnloadding()
console.log('文字加深成功')
that.showEditImageDialog = true
that.editedImageData = info.image_base64
})
},
//亮度对比度调整
colorAdjust: function () {
if (!this.isSelectedTargetCountImage(1)) {
this.eleMessage('请选择一张图像进行颜色调整')
return
}
// that.selectImageObj = {
// "image": image,
// "index": index
// }
this.editedImageData = this.selectImageObj.image.base64
this.originEditImageData = {index: this.selectImageObj.index, imageBase64: this.selectImageObj.image.base64}
this.showEditImageDialog = true
this.isAdjustColors = true
},
//真正的颜色调整逻辑
colorAdjustLogic: function () {
// colorAdjustParams: {
// brightness: 0, // 亮度，取值-255值255之间
// contrast: 0, // 饱和度，取值-127至127之间
// gamma: 1.0, // 伽马，取值0.1值5.0之间
// }
this.eleLoadding()
var that = this
var brightness = this.colorAdjustParams.brightness
var contrast = this.colorAdjustParams.contrast
var gamma = this.colorAdjustParams.gamma
// imageIndex, brightness, contrast, gamma, localSave, getBase64,
this.WebScanController.imageAdjustColors(this.originEditImageData.index, brightness, contrast, gamma,
false, true, function (info) {
that.eleUnloadding()
console.log('颜色调整成功' + that.originEditImageData.index + ' brightness:' + brightness + ' contrast:' + contrast + ' gamma:' + gamma)
that.editedImageData = info.image_base64
}
)
},
sliderAdjustColorChange: function (value) {
this.colorAdjustLogic()
},
//应用对单张原图的更改
saveEditImage: function () {
var that = this
var resultData = this.editedImageData
if (resultData == null || resultData == undefined) {
this.$alert('数据异常-图像未知！', '提示', {
confirmButtonText: '确定',
type: 'warning',
});
return
}
var targetIndex = this.originEditImageData.index
if (targetIndex == null || targetIndex == -1) {
this.$alert('数据异常-位置未知！', '提示', {
confirmButtonText: '确定',
type: 'warning',
});
return
}
this.showEditImageDialog = false
this.eleLoadding()
this.WebScanController.modifyImage(targetIndex, resultData, {}, function (info) {
that.eleUnloadding()
console.log('图片修改成功 ' + targetIndex)
that.urls[targetIndex].base64 = resultData
that.urls[targetIndex].thumbnail = resultData
//获取选中的一张重新赋值
that.selectImageObj.image.base64 = resultData;
that.undoStack.length = 0;
that.redoStack.length = 0;
that.loadImageToCanvas(that.urls[targetIndex], true)
that.editedImageData = ''
that.originEditImageData = {index: -1, imageBase64: ''}
that.isAdjustColors = false
that.colorAdjustParams = {
brightness: 0,
contrast: 0,
gamma: 1.0,
}
})
},
//取消应用对单张原图的更改
cancelEditImage: function () {
this.showEditImageDialog = false
this.editedImageData = ''
this.originEditImageData = {index: -1, imageBase64: ''}
this.isAdjustColors = false
this.colorAdjustParams = {
brightness: 0,
contrast: 0,
gamma: 1.0,
}
},
isSelectedTargetCountImage: function (selectedCount) {
return this.selectManyImages != null && this.selectManyImages.length === (selectedCount || 1)
},
isSelectedImage: function () {
return this.selectManyImages != null && this.selectManyImages.length > 0
},
提交websdk vue demo
2022-06-17 02:51:29 +00:00
/******************************************* ***************************************************************/
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) {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var type = sign ? sign : 'success'
var message = msg ? msg : '未知异常'
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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) {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var value
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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 () {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var paramsRange = this.scanParamsRange
提交websdk vue demo
2022-06-17 02:51:29 +00:00
this.scanParams = new Array()
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
for (var i = 0; i < paramsRange.length; i++) {
var group = paramsRange[i]
var newGroup = {
提交websdk vue demo
2022-06-17 02:51:29 +00:00
group_name: group.group_name,
group_param: new Array()
}
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
for (var j = 0; j < group.group_param.length; j++) {
提交websdk vue demo
2022-06-17 02:51:29 +00:00
newGroup.group_param.push({
name: group.group_param[j].name,
value: group.group_param[j].value
})
}
this.scanParams.push(newGroup)
}
解决websdk的demo扫描时左侧列表中图像顺序不对的问题
2023-11-14 08:33:20 +00:00
// console.log('当前扫描参数：' + JSON.stringify(this.scanParams))
// console.log('当前强强强扫描参数：' + JSON.stringify(paramsRange))
提交websdk vue demo
2022-06-17 02:51:29 +00:00
this.$forceUpdate()
更新websdk demo
2022-07-29 08:29:30 +00:00
},
提交websdk vue demo
2022-06-17 02:51:29 +00:00
// 将base64转换为blob
dataURLtoBlob: function (dataUrl) {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var data
提交websdk vue demo
2022-06-17 02:51:29 +00:00
if (dataUrl.indexOf(',') != -1) {
data = dataUrl.split(',')[1]
} else {
data = dataUrl
}
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var bstr = atob(data)
var n = bstr.length
var u8arr = new Uint8Array(n)
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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) {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var blob = this.dataURLtoBlob(base64)
提交websdk vue demo
2022-06-17 02:51:29 +00:00
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, fileName)
} else {
this.blobToFile(blob, fileName)
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var aLink = document.createElement('a')
提交websdk vue demo
2022-06-17 02:51:29 +00:00
document.body.appendChild(aLink)
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var evt = document.createEvent("HTMLEvents")
提交websdk vue demo
2022-06-17 02:51:29 +00:00
evt.initEvent("click", true, true)
aLink.download = fileName
aLink.href = URL.createObjectURL(blob)
aLink.click()
document.body.removeChild(aLink)
}
},
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
// 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();
// var h = this.checkTime(date.getHours())
// var m = this.checkTime(date.getMinutes())
// var s = this.checkTime(date.getSeconds())
// return h + ":" + m + ":" + s
// },
// checkTime: function (i) {
// if (i < 10) {
// i = "0" + i;
// }
// return i;
// },
提交websdk vue demo
2022-06-17 02:51:29 +00:00
showBigImage: function (index) {
console.log('showBigImage:' + index)
if (this.urls[index].base64 == null || this.urls[index].base64 == undefined || this.urls[index].base64.length == 0) {
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
var that = this
提交websdk vue demo
2022-06-17 02:51:29 +00:00
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
}
websdk demo增加裁剪和水印功能
2024-03-27 01:29:09 +00:00
},
提交websdk vue demo
2022-06-17 02:51:29 +00:00
}
})