js调用扫描仪twain进行网页图像扫描

现在的系统开发基本都是b/s架构体系了，原来的c/c++时代，因为程序都是客户端计算机里面执行，访问计算机外围外设硬件很方便，但是因为浏览器的安全机制，我们每天都在访问无数个互联网网站，要是服务器端可以任意读取与操作我们的硬件设备那将是一场灾难，例如在你不知道的情况下启动摄像头偷拍你等等，所以现在通过浏览器里面的js脚本去直接操作计算机连接的打印机，扫描仪等都不能直接实现，要实现就必须记住用专门解决此类问题的专有产品，这里是以scanonweb html5控件为例完成的js调用扫描仪操作，代码如下：

	<script src="./scanonweb.js" type="text/javascript"></script>
	<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);
			}
		}

		//响应扫描完成事件
		scanonweb.onScanFinishedEvent = function (msg) {
			document.getElementById('pdf_viewer').contentWindow.location.reload();
		}

		//响应获取图像总数的回调函数
		scanonweb.onGetImageCountEvent = function (msg) {
			console.log("图像总数:" + msg.imageCount + " 当前编辑图像索引:" + msg.currentSelected);
		}

		//开始扫描命令
		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();

		}

		//清空所有扫描图像
		function clearAll() {
			scanonweb.clearAll();
			document.getElementById('pdf_viewer').contentWindow.location.reload();
		}

		//获取图像总数
		function getImageCount() {
			scanonweb.getImageCount();
		}

		//获取所有图像
		function getAllImage() {
			scanonweb.getAllImage();
		}

		//按照jpg格式上传所有图像
		function uploadAllImageAsJpgFormat() {
			var uploadUrl = 'http://localhost:8080/upload/uploadjpg';
			for (imageIndex=0;imageIndex<scanonweb.imageCount;imageIndex++){
				scanonweb.uploadJpgImageByIndex(uploadUrl,'1234','test',imageIndex);
			}			
		}

		//按照pdf格式上传所有图像
		function uploadAllImageAsPdfFormat(){
			scanonweb.uploadAllImageAsPdfToUrl('http://localhost:8080/uploadpdf/upload','1234','test');	
		}

		//按照tiff格式上传所有图像
		function uploadAllImageAsTiffFormat(){
			scanonweb.uploadAllImageAsTiffToUrl('http://localhost:8080/uploadtiff/uploadtiff','1234','test');	
		}

	</script>

上面的脚本通过script src引入scanonweb.js文件，然后实例化了一个scanonweb实例，因为不依赖activex等传统技术，这里可以支持到最新的chrome、火狐、edge等浏览器，编写获取计算机连接是扫描仪硬件设备列表、扫描完成等事件回调函数以后就可以使用了。

 

示例程序及代码下载连接：https://www.brainysoft.cn/download/clientjs.zip