使用Javascript通过Web TWAIN协议快速集成扫描仪设备

原创

用户1935133

修改于 2025-01-23 02:14:49

1690

使用Javascript通过Web TWAIN协议快速集成扫描仪设备

由于项目需求，需要开发在Windows下与Linux下扫描功能,Linux主要是信创的两个系统(UOS、麒麟)，研究了一下发现，Windows使用Twain协议与扫描仪通讯，Linux使用的是Sane协议与扫描仪通讯，找到Twain协议和Sane协议的标准文档，英文的，都有大几百页，项目一个月内要求上线，明显没时间慢慢研究，于是在网上找了一番，发现了WebScanner这个第三方组件，这个组件可以支持通过标准扫描协议（Twain、Sane）连接各类扫描硬件，兼容Windows及Linux系统，适配不同CPU指令集（x86、Arm、Loongarch、Mips等），而且不同平台不需要重复适配，一次集成即可完成Twain、Sane协议及不同操作系统的适配实现Web页面上所见即所得的扫描集成，真是太爽了。通过使用这个组件，1、2天内就完成了项目的扫描功能，简直不要太轻松！！那么话不多说，下面简单介绍一下WebScanner扫描组件如何使用。

快速测试体验

快速体验

WebScanner网站提供了在线体验DEMO，可以直接访问DEMO页面进行体验。

如图中所示，组件提供扫描仪设备加载连接、执行扫描、web端编辑器（可展示和编辑扫描到的图像内容）、保存结果文档(保存到本地、保存到服务器)等功能，能满足大部分常规需求，具体可参考官网介绍。

系统架构与组成

如图所示，就是WebScanner的架构，主要由WSS Front Component和WSS Service两个组件组成。

WSS Front Component是WebScanner前端组件，运行与浏览器中，负责与WSS Service通信、以及文档展示与编辑、下载上传保存等功能。

WSS Service是WebScanner服务组件，作为系统服务进行运行(Windows服务或Linux服务)，负责通过TWAIN/SANE协议与扫描仪设备通讯，控制扫描过程；以及与服务器通信提交上传文档等功能。

集成WebScanner组件

WebScanner前端组件支持有纯Javascript组件、Vue.js组件等方式。我们使用纯Javavscript组件来集成。

下载WebScanner组件

从官网下载纯Javascript组件的Sample演示代码WebScanner-JS-Sample.zip

解压压缩包，解压后的目录结构和文件清单如图：

主目录下：

scripts子目录下

css子目录下

集成WebScanner纯Javascript组件到系统页面

创建测试应用主目录test，在test目录下新建测试页面test.html；

引入需要的javascript文件(依赖的文件从Sample应用中copy过来)；

<script type="text/javascript" src="scripts/jquery.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<script type="text/javascript" src="scripts/pdf/pdf.js"></script>

<script type="text/javascript" src="scripts/pdf/pdf.worker.js"></script>

<script type="text/javascript" src="scripts/pdf/jspdf.umd.min.js"></script>

<script type="text/javascript" src="scripts/tui/tui-image-editor-config.js"></script>

<script type="text/javascript" src="scripts/tui/tui-color-picker.js"></script>

<script type="text/javascript" src="scripts/tui/tui-image-editor.js"></script>

<script type="text/javascript" src="scripts/webscan.min.js"></script>

<script type="text/javascript" src="scripts/sample.js"></script>

引入需要的css文件；

<link href="css/tui/tui-color-picker.css" type="text/css" rel="stylesheet">

<link href="css/tui/tui-image-editor.css" type="text/css" rel="stylesheet">

<link href="css/sample.css" type="text/css" rel="stylesheet">

<link href="css/webscan.min.css" type="text/css" rel="stylesheet">

<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css">

在body中间加入如下代码：

<div id="webscanId"></div>

扫描仪选择框

<select id="sources" ></select>

扫描按钮

<button type="button" onclick="scan()">扫描</button>

id为webscanId的div是用于web扫描仪编辑器容器的，id将被传给WebScanner组件用于初始化编辑器组件，编辑器和编辑器的工具栏将在容器中渲染。

id为sources的列表控件用于加载和展示当前电脑所支持的扫描仪设备清单。

扫描按钮调用WebScanner组件接口对扫描仪设备进行扫描，并将扫描返回的图像加入到编辑器中显示。

在body中间加入如下javascript控制代码进行WebScanner组件初始化和设备加载处理：

<script type="text/javascript">

const myscan=new WebScan();

myscan.init(

{

"editorId":"webscanId",

"wssKey":"正式的wssKey",

}

);

console.info(myscan);

vLoadDevices();

async function vLoadDevices(){

selectSources = document.getElementById("sources");

selectSources.options.length = 0;

sourceCount = sources.length;

var response = myscan.getSourceNames();

if (response) {

let sources = response;

if (sources.length <= 0) {

selectSources.options.add(new Option("没有检测到任何扫描仪", "没有检测到任何扫描仪"));

return;

}

for (let i = 0; i < sources.length; i++) {

selectSources.options.add(new Option(sources[i], sources[i]));

}

if (sources.length > 0) {

let val = selectSources[selectSources.selectedIndex].value;

var resp = await myscan.selectDevice(val);

if (resp != "success"){

alert(resp);

}

};

</script>

完整代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>TEST</title>