Dynamic Web TWAIN扫描控件集成
Dynamic Web TWAIN 是专为网页端程序设计的文档扫描 SDK。该扫描仪控件基于浏览器部署,仅需几行 JavaScript 代码,您就可以开发强大的文档扫描程序,实现文件扫描、图像编辑、保存上传等功能。
下载地址:
http://www.damingsoft.com/products/dwt-register.aspx
API地址:
https://www.dynamsoft.com/web-twain/docs/info/api/
1.下载dwt依赖
npm install dwt
2.将node_modules/dwt/dist 文件夹内容复制到static中,保证dwt依赖独立被打包到发布文件夹中,因为dwt在初始化的时候需要从指定位置加载额外的文件进行配置。
3.扫描页面引入dwt依赖
impot dwt from 'dwt'
4.在mounted中初始化
dwt.DWT.ResourcesPath = "/static/resources/dwt"; //设置为配置项目中提到的静态文件的位置 dwt.WebTwainEnv.ProductKey = this.dwt.lincensekey; //必须设置为有效的试用版或完整密钥 dwt.DWT.Containers = [{ WebTwainId: this.dwt.id, ContainerId: this.containerId, //指定要创建DWT查看器的 DIV Width: "100%", Height: "400px", }, ]; dwt.DWT.RegisterEvent("OnWebTwainReady", () => { //DWT是初始化成功时触发的回调 this.onReady(); }); dwt.DWT.Load();
5.获取扫描仪
const _this = this this.dwt.obj = dwt.DWT.GetWebTwain('dwtViewer') //加载扫描仪 this.dwt.obj.GetSourceNamesAsync().then( function(data){ _this.scanner = data.map((scanner,idx) => {return {id:idx,text:scanner}}) } )
6.开始扫描
if(this.selectScanner == null){ this.$message({type:'info', message:'请先选择扫描仪!'}); return; } const DWObject = this.dwt.obj; if (DWObject) { if (DWObject.UseLocalService) { DWObject.SelectSourceByIndex(this.selectScanner); DWObject.OpenSource(); DWObject.IfShowUI = this.showUI; //显示页面 DWObject.PixelType = this.colorMode; //像素类型 DWObject.Resolution = this.resolution; //解析度 DWObject.IfFeederEnabled = this.autoFeeder; //自动进纸 DWObject.IfDuplexEnabled = this.duplex; //双面 DWObject.IfDisableSourceAfterAcquire = true; DWObject.IfGetImageInfo = true; DWObject.IfGetExtImageInfo = true; DWObject.extendedImageInfoQueryLevel = 0; DWObject.ShowPageNumber = true; DWObject.AcquireImage( {}, (res) => { alert("扫描成功") this.bindViewer(DWObject) DWObject.CloseSource() } ) } }
7.功能展示
本文来自博客园,作者:zwbsoft,转载请注明原文链接:https://www.cnblogs.com/zwbsoft/p/15935813.html
电话微信:13514280351
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南