现代浏览器内直接访问扫描仪进行图像扫描的方法

     在很久很久以前，IE浏览器支持activex技术，chrome和firefox等支持npapi技术，通过这些技术都可以开发原生c/c++程序访问客户端硬件外设，如驱动扫描仪进行图像扫描，但是随着windows操作系统新版不再支持IE浏览器，chrome等也都在49版本中移除了对npapi技术的支持，曾经风光一时的flash等典型应用也都退出了历史舞台，基于原生程序代码嵌入浏览器内部进行客户端操作的方式不再具有可行性。

    要实现在现代浏览器，如chrome 49以后的版本，EDGE、firefox等浏览器内去操作客户端电脑的扫描仪，需要通过websocket通讯方式与本地websocket服务器端程序进行通讯，然后在websocket服务器端程序内完成扫描仪驱动及扫描和图像处理应用。

   本次介绍的scanonweb h5程序就是专门解决这类应用的程序，之前scanonweb有activex版本，用于嵌入在IE浏览器或者360浏览器等以IE为内核的浏览器内部工作，随着现代前端技术的发展，如新版的vue等前端开发框架早就移除了对IE的支持，现在的网页图像扫描技术方案不得不摒弃activex的技术方案了，否则没办法使用最新的前端开发技术。scanonweb h5版本提供了一个托盘服务程序，支持开机自启动，启动后内置websocket server启动，网页通过websocket连接后可读取连接到电脑的扫描仪硬件都有哪些，叫什么名称，支持什么特性，如双面扫描模式，支持ADF自动进纸器等，可以直接在网页里面通过js代码驱动扫描仪工作，先设置好图像扫描参数，如是使用黑白模式，还是灰度模式，或者彩色模式，扫描图像的分辨率是多少，如300X300，设备扫描后图像结果自动回传网页前端，可直接在网页里面预览查看，也可以直接通过ajax发送到服务器端进行永久保存。

    以下一步步说明整个集成使用过程：

 1.扫描托盘服务程序下载安装

    https://www.brainysoft.cn/download/ScanOnWebH5Install.exe

    下载后直接安装就行了，没有什么特殊注意事项，如果有安全软件阻止开机自启动建议允许开机自启动，后续可以随时卸载。

2. 网页开发集成使用

    网页里面需要引入一个scanonweb.js文件，可以通过下载示例程序获得,地址：https://www.brainysoft.cn/download/clientjs.zip

    下载后复制scanonweb.js文件到项目内，可以参考test1.html文件里面的示例:

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

    接下来实例化Scanonweb对象，让其自动连接websocket托盘服务程序：

    

    <script type="text/javascript">

        var scanonweb = new ScanOnWeb();

        实例对象成功连接websocket后会自动发指令询问当前客户端电脑连接了哪些扫描仪硬件，需要提供一个回调函数接收托盘服务程序返回的设备列表信息：

      

	<script type="text/javascript">

		var scanonweb = new ScanOnWeb();

		//响应返回扫描设备列表的回调函数
		scanonweb.onGetDevicesListEvent = function (msg) {
			var deviceListDom = document.getElementById('devices');

			//clear devices list
			deviceListDom.innerHTML = "";
			for (var i = 0; i < deviceListDom.childNodes.length; i++) {
				ardeviceListDomea.removeChild(deviceListDom.options[0]);
				deviceListDom.remove(0);
				deviceListDom.options[0] = null;
			}

			//add devices info
			for (var i = 0; i < msg.devices.length; ++i) {
				var opt = document.createElement("option");
				opt.innerHTML = msg.devices[i];
				if (i == msg.currentIndex) {
					opt.selected = true;
				}
				deviceListDom.appendChild(opt);
			}
		}

   这样就在界面中列出了连接到客户端机器的扫描仪设备信息。

   当需要让设备扫描时，先确定要按照哪种色彩模式去扫描，还有设置分辨率等，之后通过startScan()就可以驱动扫描仪进行图像扫描了：

   

		//开始扫描命令
		function startScan() {
			if (document.getElementById("devices").selectedIndex == -1) {
				alert('请先刷新或者选中要使用的扫描设备后再开始扫描!');
				return;
			}

			//以下获取界面中的扫描参数设定
			scanonweb.scaner_work_config.dpi_x = document.getElementById("dpi_x").value;
			scanonweb.scaner_work_config.dpi_y = document.getElementById("dpi_y").value;
			scanonweb.scaner_work_config.deviceIndex = document.getElementById("devices").selectedIndex;
			scanonweb.scaner_work_config.showDialog = document.getElementById("showDialog").value;
			scanonweb.scaner_work_config.autoFeedEnable = document.getElementById("feedEnable").value;
			scanonweb.scaner_work_config.autoFeed = document.getElementById("autoFeed").value;
			scanonweb.scaner_work_config.dupxMode = document.getElementById("dupxMode").value;
			scanonweb.scaner_work_config.autoDeskew = document.getElementById("autoDeskew").value;
			scanonweb.scaner_work_config.autoBorderDetection = document.getElementById("autoBorderDetection").value;


			//开始发送扫描指令
			scanonweb.startScan();

		}

  设备扫描图像后还是通过回调函数发送图像给前端网页，告诉前端js，本次扫描扫描之前托盘服务程序内存里面有多少页图像，扫描完成以后有多少页图像，如果使用了自动进纸器，可能一次性会扫描十几或几十页图像：

		//响应获取某一页图像的回调函数
		scanonweb.onGetImageByIdEvent = function (msg) {
			var imageListDom = document.getElementById('imageList');
			var imageDom = document.createElement("img");
			imageDom.width = 300;
			imageDom.height = 300;
			imageDom.src = "data:image/jpg;base64," + msg.imageBase64;
			imageListDom.appendChild(imageDom);
		}

		//响应扫描完成事件
		scanonweb.onScanFinishedEvent = function (msg) {
			console.log("扫描前:" + msg.imageBeforeCount + " 扫描后:" + msg.imageAfterCount);
			//以下代码用于将新增的扫描图像从扫描服务程序中取回
			for (var i = msg.imageBeforeCount; i < msg.imageAfterCount; i++) {
				scanonweb.getImageById(i);
			}
		}

 上面的代码在onScanFinishedEvent回调里面知道了新扫描了多少页图像，然后通过getImageById取回新增图像的base64编码数据，通过onGetImageByIdEvent 回调接收结果，这样整个扫描及取回结果的过程就全部完成了，图像是要上传还是显示都是客户端业务逻辑问题了。