ScanOnWeb 入门指南
快速上手ScanOnWeb扫描控件，支持原生HTML和Vue3项目集成
5分钟快速上手
完整代码示例
多框架支持
概述
ScanOnWeb是一款专业的Web扫描控件，通过WebSocket与本地托盘服务通信，实现在浏览器中直接控制扫描仪设备。 控件支持多种扫描模式、图像处理功能，并可无缝集成到各种Web应用中。
重要提醒
ScanOnWeb控件需要用户在本地安装托盘服务程序才能正常工作。打开https://www.npmjs.com/package/scanonweb?activeTab=code,下载dist/scanonweb.umd.js文件，复制到项目中。
系统要求
客户端要求
- Windows 7/8/10/11 或 Linux
- 支持WebSocket的现代浏览器
- 兼容TWAIN 1.9+或WIA协议的扫描仪
浏览器支持
- Chrome 60+
- Firefox 55+
- Edge 79+
- Internet Explorer 11
安装步骤
步骤2：获取控件文件
从官方获取scanonweb.js控件文件，该文件包含了所有扫描功能的JavaScript API。
文件说明：
- •
scanonweb.js- 核心控件文件 - • 版本：1.0.1
- • 大小：约15KB
步骤3：复制文件到项目
将scanonweb.umd.js文件复制到您的Web项目目录中。建议放在js或assets目录下。
项目结构示例：
your-project/
├── js/
│ └── scanonweb.umd.js ← 控件文件
├── index.html
└── ...
原生HTML集成
在原生HTML项目中使用ScanOnWeb控件非常简单，只需要引入JavaScript文件并初始化即可。
完整HTML示例
复制以下代码到您的HTML文件中：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ScanOnWeb 扫描示例</title>
</head>
<body>
<h1>ScanOnWeb 扫描控件演示</h1>
<!-- 控制面板 -->
<div id="controlPanel">
<label>选择扫描设备：</label>
<select id="deviceSelect"></select>
<label>分辨率：</label>
<input type="number" id="dpiX" value="300" style="width: 60px;"> x
<input type="number" id="dpiY" value="300" style="width: 60px;">
<label>色彩模式：</label>
<select id="colorMode">
<option value="RGB">彩色</option>
<option value="GRAY">灰色</option>
<option value="BW">黑白</option>
</select>
<br><br>
<button onclick="loadDevices()">获取设备列表</button>
<button onclick="startScan()">开始扫描</button>
<button onclick="getAllImages()">获取所有图像</button>
<button onclick="clearAll()">清空结果</button>
</div>
<!-- 图像显示区域 -->
<div id="imageContainer">
<h3>扫描结果：</h3>
<div id="imageList"></div>
</div>
<!-- 引入ScanOnWeb控件 -->
<script src="js/scanonweb.umd.js"></script>
<script>
// 初始化扫描控件
let scanonweb = new ScanOnWeb();
let selectedDeviceIndex = 0;
// 获取设备列表
function loadDevices() {
scanonweb.onGetDevicesListEvent = function(msg) {
const deviceSelect = document.getElementById('deviceSelect');
deviceSelect.innerHTML = '';
msg.devices.forEach((device, index) => {
const option = document.createElement('option');
option.value = index;
option.textContent = device;
deviceSelect.appendChild(option);
});
selectedDeviceIndex = msg.currentIndex;
deviceSelect.value = selectedDeviceIndex;
};
scanonweb.loadDevices();
}
// 开始扫描
function startScan() {
if (selectedDeviceIndex === -1) {
alert('请先选择扫描设备！');
return;
}
// 配置扫描参数
scanonweb.scaner_work_config = {
deviceIndex: selectedDeviceIndex,
dpi_x: parseInt(document.getElementById('dpiX').value),
dpi_y: parseInt(document.getElementById('dpiY').value),
colorMode: document.getElementById('colorMode').value,
showDialog: false,
autoFeedEnable: false,
autoFeed: false,
dupxMode: false,
autoDeskew: false,
autoBorderDetection: false
};
scanonweb.startScan();
}
// 获取所有图像
function getAllImages() {
scanonweb.onGetAllImageEvent = function(msg) {
const imageList = document.getElementById('imageList');
imageList.innerHTML = '';
msg.images.forEach((imageBase64, index) => {
const img = document.createElement('img');
img.src = 'data:image/jpg;base64,' + imageBase64;
img.style.width = '200px';
img.style.height = '200px';
img.style.margin = '10px';
img.style.border = '1px solid #ccc';
imageList.appendChild(img);
});
};
scanonweb.getAllImage();
}
// 清空所有图像
function clearAll() {
scanonweb.clearAll();
document.getElementById('imageList').innerHTML = '';
}
// 设备选择变化事件
document.getElementById('deviceSelect').addEventListener('change', function(e) {
selectedDeviceIndex = parseInt(e.target.value);
scanonweb.selectScanDevice(selectedDeviceIndex);
});
// 扫描完成事件回调
scanonweb.onScanFinishedEvent = function(msg) {
console.log('扫描完成，图像数量：', msg.imageAfterCount);
getAllImages(); // 自动获取扫描结果
};
// 页面加载完成后自动获取设备列表
window.onload = function() {
loadDevices();
};
</script>
</body>
</html>关键代码说明
- 初始化：
let scanonweb = new ScanOnWeb(); - 获取设备：
scanonweb.loadDevices() - 开始扫描：
scanonweb.startScan() - 获取图像：
scanonweb.getAllImage() - 事件回调： 通过
onScanFinishedEvent等事件处理扫描结果
技术支持
需要帮助？
如果您在集成过程中遇到问题，或需要更多技术支持，请联系我们的技术团队。
技术支持邮箱： support@brainysoft.cn
技术支持QQ： 20155031
工作时间： 周一至周五 9:00-17:00