网页调扫描仪扫描并显示

【本文为笔者亲测,至2017年05月08日(爱普生的一款扫描仪) 可行,http://n19937243.xicp.net 的插件也是同时期可用。】
【之后插件是否可用,是否适合别的扫描仪,未亲测,仅分享个人亲测成果,不喜勿喷~】

js调起扫描仪,如果厂商没有提供相应的组件,可以通过 http://n19937243.xicp.net 注册来调扫描仪。

原理:主要依托于ActiveXObject对象控制扫描仪。
ActiveXObject:通过它可以访问windows的本地文件系统和应用程序,
比如:有的时候我们需要得到用户的机器名,用户名,得到某个文件的信息,或者读写注册表,或者启动计算器、outlook等应用程序。

而 ActiveX 控件只支持IE浏览器,故此调用方法也只能在IE浏览器中运行。

核心代码如下:
js部分:

var tScaner = null;
			var scanidx = 1;
			var TFileUpgrade=null;
			$(function() {
				isInstall();
				//自动安装扫描组件
				var uret = initScan("TScan");
				tScaner = new ActiveXObject("TScan.Scaner");
				$.getScript("http://n19937243.xicp.net/reg?rc=" +tScaner.RegCode,
			 	
  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
如果您想在 JavaScript用得力扫描仪显示图像并进行 OCR 识别内容,您可以尝试使用 Web 浏览器的 Web API,如 WebRTC 和 Tesseract.js。下面是大致的步骤: 1. 首先,您需要使用 HTML 和 JavaScript 创建一个简单的页面。在页面中,您可以添加一个按钮,用于触发扫描操作,并在页面上显示图像和 OCR 识别结果的元素(如`<img>`和`<div>`)。 2. 使用 WebRTC 的 getUserMedia 方法来获取摄像头或扫描仪的视频流。这样可以访问到扫描仪的图像数据。 3. 将视频流转换为图像数据,并将其显示在页面上的`<img>`元素中。您可以使用 HTML5 的 `<canvas>` 元素来处理图像数据。例如,可以使用 canvas 的 `drawImage` 方法将视频帧绘制到 canvas 上,然后获取 canvas 的图像数据。 4. 使用 Tesseract.js 库进行 OCR 识别。Tesseract.js 是一个基于 JavaScript 的 OCR 引擎,可以在浏览器中进行图像的文字识别。您可以使用 Tesseract.js 加载图像数据,并运行 OCR 引擎来提取文本内容。 下面是一个简单的示例代码,演示了如何在 JavaScript用得力扫描仪显示图像及进行 OCR 识别: ```html <!DOCTYPE html> <html> <head> <title>Scan and OCR</title> <script src="https://cdn.jsdelivr.net/npm/tesseract.js@2.2.2/dist/tesseract.js"></script> </head> <body> <button onclick="scanAndRecognize()">Scan and Recognize</button> <br> <img id="scannedImage" /> <div id="recognizedText"></div> <script> // 获取摄像头或扫描仪的视频流 async function getVideoStream() { const constraints = { video: true }; const stream = await navigator.mediaDevices.getUserMedia(constraints); return stream; } // 扫描并进行 OCR 识别 async function scanAndRecognize() { const video = document.createElement('video'); const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const scannedImage = document.getElementById('scannedImage'); const recognizedText = document.getElementById('recognizedText'); // 获取视频流 const stream = await getVideoStream(); video.srcObject = stream; video.play(); // 循环获取并处理视频帧 setInterval(() => { ctx.drawImage(video, 0, 0, canvas.width, canvas.height); const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); scannedImage.src = canvas.toDataURL(); Tesseract.recognize(imageData) .then(result => { recognizedText.innerText = result.text; }) .catch(error => { console.error(error); }); }, 1000); } </script> </body> </html> ``` 请注意,这只是一个简单的示例代码,具体实现可能会因您使用的浏览器和扫描仪型号而有所不同。您可能还需要进行适当的兼容性和错误处理。希望这能帮到您!如有任何问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值