scanonweb 1.0.2 → 2.0.0

package/dist/scanonweb.umd.js

@@ -1,9 +1,9 @@
 /*!
- * 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
  */
 (function (global, factory) {
@@ -13,57 +13,32 @@
 })(this, (function () { 'use strict';
 
   /**
-   * 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) => {
@@ -76,225 +51,239 @@
         };
       }).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("发送扫描指令失败！请刷新页面或者检查托盘扫描程序是否已经正常运行!");
         }
@@ -302,277 +291,166 @@
         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,
@@ -580,114 +458,66 @@
         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);
@@ -696,13 +526,9 @@
       });
     }
   }
-
-  // CommonJS 兼容性导出
   if (typeof module !== "undefined" && module.exports) {
     module.exports = ScanOnWeb;
   }
-
-  // UMD 兼容性导出
   if (typeof window !== "undefined") {
     window.ScanOnWeb = ScanOnWeb;
   }