scanonweb 1.0.2 → 2.0.0

package/dist/scanonweb.esm.js

@@ -1,63 +1,38 @@
 /*!
- * scanonweb v1.0.2
- * ScanOnWeb - 扫描控件 JavaScript SDK，用于与本地扫描服务程序通信
+ * scanonweb v2.0.0
+ * ScanOnWeb - 扫描控件 JavaScript SDK，支持 v2 协议、scanSource 和增量图像事件
  * https://www.brainysoft.cn
  * 
- * Copyright (c) 2025 BrainySoft
+ * Copyright (c) 2026 BrainySoft
  * Licensed under the MIT license
  */
 /**
- * ScanOnWeb - 扫描控件 JavaScript SDK
- * https://www.brainysoft.cn   扫描控件官方网站,如需更多文档帮助请访问官网
- * @version 1.0.1
- * @author BrainySoft
- * @license MIT
- */
-
-/**
- * 扫描控件类 - 用于与本地扫描服务程序通信
- * @class ScanOnWeb
+ * ScanOnWeb - JavaScript SDK for the local ScanOnWeb tray service.
+ * https://www.brainysoft.cn
+ * @version 2.0.0
  */
 class ScanOnWeb {
   constructor() {
-    // 扫描配置参数信息,后续扫描仪开始扫描前会根据这个配置信息来进行扫描设置
+    this.protocolVersion = 2;
+    this.serverProtocolVersion = null;
+    this.imageCount = 0;
     this.scaner_work_config = {
       showUI: false,
-      // 是否显示扫描控件工作界面，如果为false则不显示扫描控件工作界面
       dpi_x: 300,
-      // dpi 分辨率x，一般的图像扫描300dpi就够了
       dpi_y: 300,
-      // dpi 分辨率y
       deviceIndex: 0,
-      // 选中的扫描仪硬件设备id索引，如果有多个扫描仪设备，这个值就是用来选择哪个设备进行扫描的
       showDialog: false,
-      // 是否显示设备内置对话框
-      autoFeedEnable: true,
-      // 是否使用自动进纸器(需要设备支持才能正常工作)
+      scanSource: "flatbed",
       autoFeed: false,
-      // 是否自动装填纸张(需要设备支持才能正常工作)
       dupxMode: false,
-      // 是否使用双面扫描模式(需要设备支持才能正常工作)
       autoDeskew: false,
-      // 是否使用自动纠偏模式(需要设备支持才能正常工作)
       autoBorderDetection: false,
-      // 是否使用自动边框检测(需要设备支持才能正常工作)
       colorMode: "RGB",
-      // 色彩模式,RGB为彩色模式,BW是黑白模式 ,GRAY是灰色模式
-      transMode: "memory" // 数据传输模式,memory,file,native 这三种配置值,默认为memory模式，大部分设备都是使用这种模式
+      transMode: "memory"
     };
     this.h5socket = null;
-    this.imageCount = 0; // 扫描结果图像总数
-
-    // 尝试连接websocket服务器,注意连接成功哪个是通过回调实现的
     this.tryConnect();
   }
-
-  /**
-   * 通过连接多个websocket server端口返回一个可用的websocket连接对象,主要用于防止本地端口被占用的情况
-   * @param {string[]} wssUrls - WebSocket服务器URL数组
-   * @returns {Promise} WebSocket连接Promise
-   */
   getConnectedServer(wssUrls) {
     console.log("尝试连接托盘扫描服务websocket服务器...");
     return new Promise((resolve, reject) => {
@@ -70,225 +45,239 @@ class ScanOnWeb {
       };
     }).then(server => {
       console.log("连接websocket服务器成功!");
-      // 找到了可用websocket服务器端口
       this.initWebsocketCallback(server);
       console.log("尝试获取扫描设备列表...");
-      // 发送一个获取扫描设备列表的命令,询问本地计算机安装了多少个扫描设备的驱动程序
       this.loadDevices();
       return server;
     }, err => {
-      // 如果连接失败,则尝试连接其他端口
       if (wssUrls.length > 1) {
         return this.getConnectedServer(wssUrls.slice(1));
       }
       throw err;
     });
   }
-
-  /**
-   * 尝试检测websocket哪个端口可以成功连接
-   */
   tryConnect() {
-    // 以下一共定义了5个websocket端口,如果有端口被占用,则会自动尝试连接下一个端口
     const wssUrls = ["ws://127.0.0.1:1001", "ws://127.0.0.1:2001", "ws://127.0.0.1:3001", "ws://127.0.0.1:4001", "ws://127.0.0.1:5001"];
     this.getConnectedServer(wssUrls);
   }
-
-  /**
-   * 初始化websocket相关的函数绑定
-   * @param {WebSocket} server - WebSocket服务器实例
-   */
   initWebsocketCallback(server) {
     this.h5socket = server;
     this.h5socket.onerror = this.onSocketError.bind(this);
     this.h5socket.onmessage = this.onSocketMessage.bind(this);
   }
-
-  /**
-   * WebSocket错误处理
-   * @param {Event} event - 错误事件
-   */
   onSocketError(event) {
     alert("无法连接扫描服务程序,请检查扫描服务程序是否已经启动！");
     console.log("WebSocket error: " + event.data);
   }
-
-  /**
-   * 判断回调函数是否存在
-   * @param {Function} f - 要检查的函数
-   * @returns {boolean} 函数是否存在且为函数类型
-   */
   isCallbackExist(f) {
     if (!f || typeof f === "undefined" || f === undefined) {
       return false;
     }
     return typeof f === "function";
   }
-
-  /**
-   * WebSocket消息处理
-   * @param {MessageEvent} event - WebSocket消息事件
-   */
+  dispatchCallback(name, msg) {
+    if (this.isCallbackExist(this[name])) {
+      this[name](msg);
+    }
+  }
+  toBoolCompat(value) {
+    if (typeof value === "boolean") {
+      return value;
+    }
+    if (typeof value === "number") {
+      return value !== 0;
+    }
+    if (typeof value === "string") {
+      const normalized = value.trim().toLowerCase();
+      return ["1", "true", "yes", "y", "on", "adf"].includes(normalized);
+    }
+    return !!value;
+  }
+  toIntCompat(value, fallback) {
+    const parsed = Number(value);
+    return Number.isInteger(parsed) ? parsed : fallback;
+  }
+  normalizeScanSource(scanSource, legacyAutoFeedEnable) {
+    if (typeof scanSource === "string") {
+      const normalized = scanSource.trim().toLowerCase();
+      if (normalized === "adf" || normalized === "feeder" || normalized === "documentfeeder" || normalized === "document_feeder" || normalized === "automatic_document_feeder") {
+        return "adf";
+      }
+      if (normalized === "flatbed" || normalized === "flat_bed" || normalized === "platen") {
+        return "flatbed";
+      }
+    }
+    if (this.toBoolCompat(legacyAutoFeedEnable)) {
+      return "adf";
+    }
+    return "flatbed";
+  }
+  getLegacyAutoFeedEnable(scanSource) {
+    return this.normalizeScanSource(scanSource) === "adf";
+  }
+  shouldIncludeLegacyAutoFeedEnable() {
+    return this.serverProtocolVersion === null || this.serverProtocolVersion < 2;
+  }
+  normalizeScanConfig(config, options) {
+    const merged = Object.assign({}, this.scaner_work_config, config || {});
+    const includeLegacyAutoFeedEnable = !options || options.includeLegacyAutoFeedEnable !== false;
+    const normalized = {
+      showUI: this.toBoolCompat(merged.showUI),
+      dpi_x: this.toIntCompat(merged.dpi_x, 300),
+      dpi_y: this.toIntCompat(merged.dpi_y, 300),
+      deviceIndex: this.toIntCompat(merged.deviceIndex, 0),
+      showDialog: this.toBoolCompat(merged.showDialog),
+      scanSource: this.normalizeScanSource(merged.scanSource, merged.autoFeedEnable),
+      autoFeed: this.toBoolCompat(merged.autoFeed),
+      dupxMode: this.toBoolCompat(merged.dupxMode),
+      autoDeskew: this.toBoolCompat(merged.autoDeskew),
+      autoBorderDetection: this.toBoolCompat(merged.autoBorderDetection),
+      colorMode: merged.colorMode || "RGB",
+      transMode: merged.transMode || "memory"
+    };
+    if (includeLegacyAutoFeedEnable) {
+      normalized.autoFeedEnable = this.getLegacyAutoFeedEnable(normalized.scanSource);
+    }
+    return normalized;
+  }
+  recordServerProtocolVersion(msg) {
+    const version = this.toIntCompat(msg && msg.protocolVersion, 1);
+    this.serverProtocolVersion = version;
+    return version;
+  }
+  applyIncomingScanConfig(msg) {
+    this.scaner_work_config.deviceIndex = this.toIntCompat(msg.currentIndex, this.scaner_work_config.deviceIndex);
+    if (Object.prototype.hasOwnProperty.call(msg, "showDialog")) {
+      this.scaner_work_config.showDialog = this.toBoolCompat(msg.showDialog);
+    }
+    this.scaner_work_config.scanSource = this.normalizeScanSource(msg.scanSource, msg.autoFeedEnable);
+    if (Object.prototype.hasOwnProperty.call(msg, "autoFeed")) {
+      this.scaner_work_config.autoFeed = this.toBoolCompat(msg.autoFeed);
+    }
+    if (Object.prototype.hasOwnProperty.call(msg, "dupxMode")) {
+      this.scaner_work_config.dupxMode = this.toBoolCompat(msg.dupxMode);
+    }
+    if (Object.prototype.hasOwnProperty.call(msg, "autoDeskew")) {
+      this.scaner_work_config.autoDeskew = this.toBoolCompat(msg.autoDeskew);
+    }
+    if (Object.prototype.hasOwnProperty.call(msg, "autoBorderDetection")) {
+      this.scaner_work_config.autoBorderDetection = this.toBoolCompat(msg.autoBorderDetection);
+    }
+    if (typeof msg.colorMode === "string" && msg.colorMode) {
+      this.scaner_work_config.colorMode = msg.colorMode;
+    }
+    if (typeof msg.transMode === "string" && msg.transMode) {
+      this.scaner_work_config.transMode = msg.transMode;
+    }
+    this.scaner_work_config.autoFeedEnable = this.getLegacyAutoFeedEnable(this.scaner_work_config.scanSource);
+  }
+  normalizeIncomingMessage(rawMsg) {
+    const msg = Object.assign({}, rawMsg || {});
+    const protocolVersion = this.recordServerProtocolVersion(msg);
+    const rawType = typeof msg.cmd_type === "string" ? msg.cmd_type : "";
+    if (!msg.scanSource) {
+      msg.scanSource = this.normalizeScanSource(msg.scanSource, msg.autoFeedEnable);
+    }
+    switch (rawType) {
+      case "getAllImage":
+        msg.cmd_type = "imageListSnapshot";
+        break;
+      case "getImageById":
+        msg.cmd_type = "imageSnapshot";
+        break;
+      case "imageDrap":
+        msg.cmd_type = "imageMoved";
+        break;
+    }
+    if (!msg.protocolVersion) {
+      msg.protocolVersion = protocolVersion;
+    }
+    return msg;
+  }
   onSocketMessage(event) {
-    const msg = JSON.parse(event.data);
-    // console.log(msg);
+    const rawMsg = JSON.parse(event.data);
+    const msg = this.normalizeIncomingMessage(rawMsg);
+    if (typeof msg.imageCount === "number") {
+      this.imageCount = msg.imageCount;
+    }
     switch (msg.cmd_type) {
       case "getDevicesList":
-        {
-          // 获取设备信息列表返回结果
-          if (this.isCallbackExist(this.onGetDevicesListEvent)) {
-            this.onGetDevicesListEvent(msg);
-          }
-          break;
-        }
+        this.dispatchCallback("onGetDevicesListEvent", msg);
+        break;
       case "scanComplete":
-        {
-          // 扫描完成
-          this.imageCount = msg.imageCount;
-          if (this.isCallbackExist(this.onScanFinishedEvent)) {
-            this.onScanFinishedEvent(msg);
-          }
-          break;
-        }
+        this.dispatchCallback("onScanFinishedEvent", msg);
+        break;
       case "selectScanDevice":
-        {
-          // 选择扫描设备结果
-          this.scaner_work_config.deviceIndex = msg.currentIndex; // 当前选中的设备索引
-          this.scaner_work_config.showDialog = msg.showDialog; // 是否显示设备内置对话框
-          this.scaner_work_config.autoFeedEnable = msg.autoFeedEnable; // 是否使用自动进纸器(需要设备支持才能正常工作)
-          this.scaner_work_config.autoFeed = msg.autoFeed; // 是否自动装填纸张(需要设备支持才能正常工作)
-          this.scaner_work_config.dupxMode = msg.dupxMode; // 是否使用双面扫描模式(需要设备支持才能正常工作)
-          this.scaner_work_config.autoDeskew = msg.autoDeskew; // 是否使用自动纠偏模式(需要设备支持才能正常工作)
-          this.scaner_work_config.autoBorderDetection = msg.autoBorderDetection; // 是否使用自动边框检测(需要设备支持才能正常工作)
-
-          if (this.isCallbackExist(this.onSelectScanDeviceEvent)) {
-            this.onSelectScanDeviceEvent(msg);
-          }
-          break;
-        }
+        this.applyIncomingScanConfig(msg);
+        this.dispatchCallback("onSelectScanDeviceEvent", msg);
+        break;
       case "getImageCount":
-        {
-          // 获取扫描图片数量
-          this.imageCount = msg.imageCount;
-          if (this.isCallbackExist(this.onGetImageCountEvent)) {
-            this.onGetImageCountEvent(msg);
-          }
-          break;
-        }
-      case "getAllImage":
-        {
-          // 获取所有图片
-          this.imageCount = msg.imageCount;
-          if (this.isCallbackExist(this.onGetAllImageEvent)) {
-            this.onGetAllImageEvent(msg);
-          }
-          break;
-        }
-      case "getImageById":
-        {
-          // 获取某一页图片的base64编码数据
-          this.imageCount = msg.imageCount;
-          if (this.isCallbackExist(this.onGetImageByIdEvent)) {
-            this.onGetImageByIdEvent(msg);
-          }
-          break;
-        }
+        this.dispatchCallback("onGetImageCountEvent", msg);
+        break;
+      case "imageListSnapshot":
+        this.dispatchCallback("onImageListSnapshotEvent", msg);
+        this.dispatchCallback("onGetAllImageEvent", msg);
+        break;
+      case "imageSnapshot":
+        this.dispatchCallback("onImageSnapshotEvent", msg);
+        this.dispatchCallback("onGetImageByIdEvent", msg);
+        break;
+      case "scanPageAdded":
+        this.dispatchCallback("onScanPageAddedEvent", msg);
+        break;
       case "loadImageFromUrl":
-        {
-          // 从URL加载图片
-          this.imageCount = msg.imageCount;
-          if (this.isCallbackExist(this.onLoadImageFromUrlEvent)) {
-            this.onLoadImageFromUrlEvent(msg);
-          }
-          break;
-        }
+        this.dispatchCallback("onLoadImageFromUrlEvent", msg);
+        break;
       case "loadImageFromBase64":
-        {
-          // 从Base64数据加载图片
-          this.imageCount = msg.imageCount;
-          if (this.isCallbackExist(this.onLoadImageFromBase64Event)) {
-            this.onLoadImageFromBase64Event(msg);
-          }
-          break;
-        }
+        this.dispatchCallback("onLoadImageFromBase64Event", msg);
+        break;
       case "rotateImage":
-        {
-          // 旋转图片
-          this.imageCount = msg.imageCount;
-          if (this.isCallbackExist(this.onRotateImageEvent)) {
-            this.onRotateImageEvent(msg);
-          }
-          break;
-        }
+        this.dispatchCallback("onRotateImageEvent", msg);
+        break;
       case "getImageSize":
-        {
-          // 获取图片尺寸
-          this.imageCount = msg.imageCount;
-          if (this.isCallbackExist(this.onGetImageSizeEvent)) {
-            this.onGetImageSizeEvent(msg);
-          }
-          break;
-        }
+        this.dispatchCallback("onGetImageSizeEvent", msg);
+        break;
       case "uploadAllImageAsPdfToUrl":
-        {
-          // 上传pdf图像到指定的URL的回调
-          if (this.isCallbackExist(this.onUploadAllImageAsPdfToUrlEvent)) {
-            this.onUploadAllImageAsPdfToUrlEvent(msg);
-          }
-          break;
-        }
+        this.dispatchCallback("onUploadAllImageAsPdfToUrlEvent", msg);
+        break;
       case "uploadAllImageAsTiffToUrl":
-        {
-          // 上传tiff图像到指定的URL的回调
-          if (this.isCallbackExist(this.onUploadAllImageAsTiffToUrlEvent)) {
-            this.onUploadAllImageAsTiffToUrlEvent(msg);
-          }
-          break;
-        }
+        this.dispatchCallback("onUploadAllImageAsTiffToUrlEvent", msg);
+        break;
       case "uploadJpgImageByIndex":
-        {
-          // 上传jpg图像到指定的URL的回调
-          if (this.isCallbackExist(this.onUploadJpgImageByIndexEvent)) {
-            this.onUploadJpgImageByIndexEvent(msg);
-          }
-          break;
-        }
+        this.dispatchCallback("onUploadJpgImageByIndexEvent", msg);
+        break;
       case "upload":
-        {
-          this.imageCount = msg.imageCount;
-          // 用户点击了界面里面的"开始上传"按钮的时间回调
-          if (this.isCallbackExist(this.onUploadEvent)) {
-            this.onUploadEvent(msg);
-          }
-          break;
-        }
+        this.dispatchCallback("onUploadEvent", msg);
+        break;
       case "imageEdited":
-        {
-          // 用户在扫描托盘程序里面对图片进行了编辑操作的回调
-          if (this.isCallbackExist(this.onImageEditedEvent)) {
-            this.onImageEditedEvent(msg);
-          }
-          break;
-        }
-      case "imageDrap":
-        {
-          // 用户在扫描托盘程序里面对图片进行了拖拽操作的回调
-          if (this.isCallbackExist(this.onImageDrapEvent)) {
-            this.onImageDrapEvent(msg);
-          }
-          break;
-        }
+        this.dispatchCallback("onImageEditedEvent", msg);
+        break;
+      case "imageMoved":
+        this.dispatchCallback("onImageMovedEvent", msg);
+        this.dispatchCallback("onImageDrapEvent", msg);
+        break;
+      case "imageDeleted":
+        this.dispatchCallback("onImageDeletedEvent", msg);
+        break;
+      case "imagesCleared":
+        this.dispatchCallback("onImagesClearedEvent", msg);
+        break;
     }
   }
-
-  /**
-   * 通过websocket发送数据给webscoket服务端
-   * @param {Object} commandData - 要发送的命令数据
-   */
+  normalizeOutgoingCommand(commandData) {
+    const cmd = Object.assign({}, commandData || {});
+    cmd.protocolVersion = this.protocolVersion;
+    if (cmd.cmd_type === "startScan") {
+      cmd.config = this.normalizeScanConfig(cmd.config || this.scaner_work_config, {
+        includeLegacyAutoFeedEnable: this.shouldIncludeLegacyAutoFeedEnable()
+      });
+    }
+    return cmd;
+  }
   sendWebSocketCommand(commandData) {
     try {
-      if (this.h5socket.readyState === 1) {
-        this.h5socket.send(JSON.stringify(commandData));
+      if (this.h5socket && this.h5socket.readyState === 1) {
+        this.h5socket.send(JSON.stringify(this.normalizeOutgoingCommand(commandData)));
       } else {
         alert("发送扫描指令失败！请刷新页面或者检查托盘扫描程序是否已经正常运行!");
       }
@@ -296,277 +285,166 @@ class ScanOnWeb {
       alert("发送扫描指令失败！" + e);
     }
   }
-
-  /**
-   * 设置授权信息
-   * @param {string} licenseMode - 授权模式
-   * @param {string} key1 - 授权密钥1
-   * @param {string} key2 - 授权密钥2
-   * @param {string} licenseServerUrl - 授权服务器URL
-   */
   setLicenseKey(licenseMode, key1, key2, licenseServerUrl) {
-    const cmdObj = {
+    this.sendWebSocketCommand({
       cmd_type: "setLicenseKey",
       licenseMode: licenseMode,
       key1: key1,
       key2: key2,
       url: licenseServerUrl
-    };
-    this.sendWebSocketCommand(cmdObj);
+    });
   }
-
-  /**
-   * 加载所有可用的扫描设备
-   */
   loadDevices() {
-    const cmdObj = {
+    this.sendWebSocketCommand({
       cmd_type: "getDevicesList"
-    };
-    this.sendWebSocketCommand(cmdObj);
+    });
   }
-
-  /**
-   * 设置当前选中的扫描设备id
-   * @param {number} deviceIndex - 设备索引
-   */
   selectScanDevice(deviceIndex) {
-    const cmdObj = {
+    this.sendWebSocketCommand({
       cmd_type: "selectScanDevice",
       deviceIndex: deviceIndex
-    };
-    this.sendWebSocketCommand(cmdObj);
+    });
   }
-
-  /**
-   * 开始扫描
-   */
   startScan() {
-    const cmdObj = {
+    this.sendWebSocketCommand({
       cmd_type: "startScan",
       config: this.scaner_work_config
-    };
-    this.sendWebSocketCommand(cmdObj);
+    });
   }
-
-  /**
-   * 清除全部扫描结果
-   */
   clearAll() {
-    const cmdObj = {
+    this.sendWebSocketCommand({
       cmd_type: "clearAll"
-    };
-    this.sendWebSocketCommand(cmdObj);
+    });
   }
-
-  /**
-   * 获取图像总数
-   */
   getImageCount() {
-    const cmdObj = {
+    this.sendWebSocketCommand({
       cmd_type: "getImageCount"
-    };
-    this.sendWebSocketCommand(cmdObj);
+    });
   }
-
-  /**
-   * 获取所有图像
-   */
   getAllImage() {
-    const cmdObj = {
+    this.sendWebSocketCommand({
       cmd_type: "getAllImage"
-    };
-    this.sendWebSocketCommand(cmdObj);
+    });
   }
-
-  /**
-   * 发送指令获取某一页图像到托盘服务
-   * @param {number} index - 图像索引
-   */
-  getImageById(index) {
-    const cmdObj = {
-      cmd_type: "getImageById",
-      index: index
+  getImageById(indexOrImageId) {
+    const command = {
+      cmd_type: "getImageById"
     };
-    this.sendWebSocketCommand(cmdObj);
+    if (typeof indexOrImageId === "string" && indexOrImageId.trim()) {
+      command.imageId = indexOrImageId.trim();
+    } else {
+      command.index = indexOrImageId;
+    }
+    this.sendWebSocketCommand(command);
   }
-
-  /**
-   * 发送指令远程加载服务器端的多页图像到托盘服务
-   * 支持PDF、TIFF以及常见图像格式（JPG、PNG、BMP等）
-   * @param {string} url - 图像URL
-   * @param {string} [type] - 可选，指定文件类型：'pdf'、'tiff'、'image'，如果不指定则根据URL扩展名自动判断
-   */
   loadImageFromUrl(url, type) {
-    // 如果没有指定类型，则根据URL扩展名自动判断
     if (!type) {
-      const extension = url.split('.').pop().toLowerCase();
-      if (extension === 'pdf') {
-        type = 'pdf';
-      } else if (extension === 'tiff' || extension === 'tif') {
-        type = 'tiff';
-      } else if (['jpg', 'jpeg', 'png', 'bmp', 'gif', 'webp'].includes(extension)) {
-        type = 'image';
+      const extension = url.split(".").pop().toLowerCase();
+      if (extension === "pdf") {
+        type = "pdf";
+      } else if (extension === "tiff" || extension === "tif") {
+        type = "tiff";
+      } else if (["jpg", "jpeg", "png", "bmp", "gif", "webp"].includes(extension)) {
+        type = "image";
       } else {
-        // 默认当作普通图像处理
-        type = 'image';
+        type = "image";
       }
     }
-    const cmdObj = {
+    this.sendWebSocketCommand({
       cmd_type: "loadImageFromUrl",
       url: url,
       type: type
-    };
-    this.sendWebSocketCommand(cmdObj);
+    });
   }
-
-  /**
-   * 发送指令从Base64编码数据加载图像到托盘服务
-   * @param {string} base64Data - Base64编码的图像数据（不包含data:image/xxx;base64,前缀）
-   * @param {string} [format='jpg'] - 图像格式，如：'jpg'、'png'、'bmp'等，默认为'jpg'
-   */
-  loadImageFromBase64(base64Data, format = 'jpg') {
-    // 如果base64数据包含data URL前缀，则去除它
-    if (base64Data.startsWith('data:')) {
-      const base64Index = base64Data.indexOf('base64,');
+  loadImageFromBase64(base64Data, format) {
+    let normalizedFormat = format || "jpg";
+    let normalizedBase64 = base64Data;
+    if (normalizedBase64.startsWith("data:")) {
+      const base64Index = normalizedBase64.indexOf("base64,");
       if (base64Index !== -1) {
-        // 尝试从data URL中提取格式信息
-        const mimeMatch = base64Data.match(/data:image\/(\w+);/);
-        if (mimeMatch && mimeMatch[1] && !format) {
-          format = mimeMatch[1] === 'jpeg' ? 'jpg' : mimeMatch[1];
+        if (!format) {
+          const mimeMatch = normalizedBase64.match(/data:image\/(\w+);/);
+          if (mimeMatch && mimeMatch[1]) {
+            normalizedFormat = mimeMatch[1] === "jpeg" ? "jpg" : mimeMatch[1];
+          }
         }
-        // 提取纯Base64数据
-        base64Data = base64Data.substring(base64Index + 7);
+        normalizedBase64 = normalizedBase64.substring(base64Index + 7);
       }
     }
-    const cmdObj = {
+    this.sendWebSocketCommand({
       cmd_type: "loadImageFromBase64",
-      base64Data: base64Data,
-      format: format
-    };
-    this.sendWebSocketCommand(cmdObj);
+      base64Data: normalizedBase64,
+      format: normalizedFormat
+    });
   }
-
-  /**
-   * 发送指令旋转某一页图像到托盘服务
-   * @param {number} index - 图像索引
-   * @param {number} angle - 旋转角度
-   */
   rotateImage(index, angle) {
-    const cmdObj = {
+    this.sendWebSocketCommand({
       cmd_type: "rotateImage",
       index: index,
       angle: angle
-    };
-    this.sendWebSocketCommand(cmdObj);
+    });
   }
-
-  /**
-   * 发送指令获取某一页图像的宽度到托盘服务
-   * @param {number} index - 图像索引
-   */
   getImageSize(index) {
-    const cmdObj = {
+    this.sendWebSocketCommand({
       cmd_type: "getImageSize",
       index: index
-    };
-    this.sendWebSocketCommand(cmdObj);
+    });
   }
-
-  /**
-   * 发送指令删除某一页图像到托盘服务
-   * @param {number} index - 图像索引
-   */
-  deleteImageByIndex(index) {
-    const cmdObj = {
+  deleteImageByIndex(index, imageId) {
+    const command = {
       cmd_type: "deleteImageByIndex",
       index: index
     };
-    this.sendWebSocketCommand(cmdObj);
+    if (typeof imageId === "string" && imageId.trim()) {
+      command.imageId = imageId.trim();
+    }
+    this.sendWebSocketCommand(command);
+  }
+  moveImage(oldIndex, newIndex) {
+    this.sendWebSocketCommand({
+      cmd_type: "moveImage",
+      oldIndex: oldIndex,
+      newIndex: newIndex
+    });
   }
-
-  /**
-   * 以pdf格式上传全部图像到服务器端
-   * @param {string} url - 上传URL
-   * @param {string} id - 标识ID
-   * @param {string} desc - 描述信息
-   */
   uploadAllImageAsPdfToUrl(url, id, desc) {
-    const cmdObj = {
+    this.sendWebSocketCommand({
       cmd_type: "uploadAllImageAsPdfToUrl",
       url: url,
       id: id,
       desc: desc
-    };
-    this.sendWebSocketCommand(cmdObj);
+    });
   }
-
-  /**
-   * 以tiff格式上传全部图像到服务器端
-   * @param {string} url - 上传URL
-   * @param {string} id - 标识ID
-   * @param {string} desc - 描述信息
-   */
   uploadAllImageAsTiffToUrl(url, id, desc) {
-    const cmdObj = {
+    this.sendWebSocketCommand({
       cmd_type: "uploadAllImageAsTiffToUrl",
       url: url,
       id: id,
       desc: desc
-    };
-    this.sendWebSocketCommand(cmdObj);
+    });
   }
-
-  /**
-   * 以jpg格式上传某一页图像到服务器端
-   * @param {string} url - 上传URL
-   * @param {string} id - 标识ID
-   * @param {string} desc - 描述信息
-   * @param {number} index - 图像索引
-   */
   uploadJpgImageByIndex(url, id, desc, index) {
-    const cmdObj = {
+    this.sendWebSocketCommand({
       cmd_type: "uploadJpgImageByIndex",
       index: index,
       url: url,
       id: id,
       desc: desc
-    };
-    this.sendWebSocketCommand(cmdObj);
+    });
   }
-
-  /**
-   * 全部图像保存到客户端本地文件
-   * @param {string} filename - 文件名
-   */
   saveAllImageToLocal(filename) {
-    const cmdObj = {
+    this.sendWebSocketCommand({
       cmd_type: "saveAllImageToLocal",
       filename: filename
-    };
-    this.sendWebSocketCommand(cmdObj);
+    });
   }
-
-  /**
-   * 从客户端本地读取图像,通过打开文件对话框选择图像文件
-   */
   openClientLocalfile() {
-    const cmdObj = {
+    this.sendWebSocketCommand({
       cmd_type: "openClientLocalfile"
-    };
-    this.sendWebSocketCommand(cmdObj);
+    });
   }
-
-  /**
-   * ftp上传全部图像文件到服务器端
-   * @param {string} serverIp - 服务器IP
-   * @param {number} port - 端口
-   * @param {string} username - 用户名
-   * @param {string} password - 密码
-   * @param {string} serverPath - 服务器路径
-   * @param {string} filename - 文件名
-   */
   ftpUploadAllImage(serverIp, port, username, password, serverPath, filename) {
-    const cmdObj = {
+    this.sendWebSocketCommand({
       cmd_type: "ftpUploadAllImage",
       serverIp: serverIp,
       port: port,
@@ -574,114 +452,66 @@ class ScanOnWeb {
       password: password,
       serverPath: serverPath,
       filename: filename
-    };
-    this.sendWebSocketCommand(cmdObj);
+    });
   }
-
-  /**
-   * 设置上传按钮是否可见
-   * @param {boolean} visible - 是否可见
-   */
   setUploadButtonVisible(visible) {
-    const cmdObj = {
+    this.sendWebSocketCommand({
       cmd_type: "setUploadButtonVisible",
       visible: visible
-    };
-    this.sendWebSocketCommand(cmdObj);
+    });
   }
-
-  /**
-   * 设置焦点
-   */
   setFocus() {
-    const cmdObj = {
+    this.sendWebSocketCommand({
       cmd_type: "focus"
-    };
-    this.sendWebSocketCommand(cmdObj);
+    });
   }
-
-  /**
-   * 隐藏窗口
-   */
   hidden() {
-    const cmdObj = {
+    this.sendWebSocketCommand({
       cmd_type: "hidden"
-    };
-    this.sendWebSocketCommand(cmdObj);
+    });
   }
-
-  /**
-   * 关闭websocket连接
-   */
   closeWebSocket() {
     this.h5socket.close();
   }
-
-  /**
-   * 批量从Base64数据加载多个图像
-   * @param {Array} base64Images - Base64图像数组，每个元素为 {data: 'base64字符串', format: '格式'}
-   */
   loadMultipleImagesFromBase64(base64Images) {
     if (!Array.isArray(base64Images) || base64Images.length === 0) {
-      console.error('loadMultipleImagesFromBase64: 参数必须是非空数组');
+      console.error("loadMultipleImagesFromBase64: 参数必须是非空数组");
       return;
     }
-
-    // 逐个加载图像
     base64Images.forEach((image, index) => {
       setTimeout(() => {
-        this.loadImageFromBase64(image.data, image.format || 'jpg');
-      }, index * 100); // 每个图像间隔100ms，避免同时发送过多数据
+        this.loadImageFromBase64(image.data, image.format || "jpg");
+      }, index * 100);
     });
   }
-
-  /**
-   * 从Canvas元素加载图像
-   * @param {HTMLCanvasElement} canvas - Canvas元素
-   * @param {string} [format='jpg'] - 图像格式
-   * @param {number} [quality=0.9] - 图像质量（0-1之间，仅对jpg格式有效）
-   */
-  loadImageFromCanvas(canvas, format = 'jpg', quality = 0.9) {
+  loadImageFromCanvas(canvas, format, quality) {
+    const normalizedFormat = format || "jpg";
+    const normalizedQuality = typeof quality === "number" ? quality : 0.9;
     if (!canvas || !(canvas instanceof HTMLCanvasElement)) {
-      console.error('loadImageFromCanvas: 参数必须是有效的Canvas元素');
+      console.error("loadImageFromCanvas: 参数必须是有效的Canvas元素");
       return;
     }
-
-    // 将Canvas转换为Base64
-    const mimeType = format === 'jpg' ? 'image/jpeg' : `image/${format}`;
-    const dataUrl = canvas.toDataURL(mimeType, quality);
-
-    // 提取Base64数据部分
-    const base64Data = dataUrl.split(',')[1];
-
-    // 调用Base64加载方法
-    this.loadImageFromBase64(base64Data, format);
+    const mimeType = normalizedFormat === "jpg" ? "image/jpeg" : "image/" + normalizedFormat;
+    const dataUrl = canvas.toDataURL(mimeType, normalizedQuality);
+    const base64Data = dataUrl.split(",")[1];
+    this.loadImageFromBase64(base64Data, normalizedFormat);
   }
-
-  /**
-   * 从文件输入元素加载图像
-   * @param {HTMLInputElement} fileInput - 文件输入元素
-   */
   loadImageFromFileInput(fileInput) {
     if (!fileInput || !fileInput.files || fileInput.files.length === 0) {
-      console.error('loadImageFromFileInput: 没有选择文件');
+      console.error("loadImageFromFileInput: 没有选择文件");
       return;
     }
     const files = Array.from(fileInput.files);
     files.forEach((file, index) => {
-      // 检查是否为图像文件
-      if (!file.type.startsWith('image/')) {
-        console.warn(`跳过非图像文件: ${file.name}`);
+      if (!file.type.startsWith("image/")) {
+        console.warn("跳过非图像文件: " + file.name);
         return;
       }
       const reader = new FileReader();
       reader.onload = e => {
         const dataUrl = e.target.result;
-        // 获取文件扩展名
-        const extension = file.name.split('.').pop().toLowerCase();
-        const format = extension === 'jpeg' ? 'jpg' : extension;
-
-        // 延迟加载，避免同时处理过多文件
+        const extension = file.name.split(".").pop().toLowerCase();
+        const format = extension === "jpeg" ? "jpg" : extension;
         setTimeout(() => {
           this.loadImageFromBase64(dataUrl, format);
         }, index * 100);
@@ -690,13 +520,9 @@ class ScanOnWeb {
     });
   }
 }
-
-// CommonJS 兼容性导出
 if (typeof module !== "undefined" && module.exports) {
   module.exports = ScanOnWeb;
 }
-
-// UMD 兼容性导出
 if (typeof window !== "undefined") {
   window.ScanOnWeb = ScanOnWeb;
 }