在 JavaScript 中控制扫描仪和网络摄像头
在 JavaScript 中控制扫描仪和网络摄像头。
引言
使 Web 应用程序能够控制摄像头和扫描仪是很常见的（虽然不容易）。例如，一个为医疗保健设计的应用程序将在登记处拍摄患者的照片，然后将照片存储在服务器上患者的医疗文件中。报告可以在稍后扫描并上传。
Dynamsoft 的 ImageCapture Suite 是一个专门用于从网络摄像头和扫描仪捕获图像/文档的浏览器插件。该组件与 Internet Explorer (32 位和 64 位)、Firefox、Chrome、Safari 和 Opera 兼容，并为成像设备提供最全面的支持。
主要特点
- 从摄像头（内置和数码）、扫描仪和其他 TWAIN/WIA/UVC 兼容设备捕获图像。
- 与 Windows 上的 Internet Explorer (32 位和 64 位)、Firefox、Chrome、Safari 和 Opera 兼容。
- 编辑捕获的图像：裁剪、更改图像大小、旋转、倾斜校正等。
- 将图像上传到本地文件夹、Web 服务器、FTP 站点、SharePoint 库、数据库和其他系统。
- 支持的图像格式包括 BMP、JPEG、PNG、TIFF（单页和多页）和 PDF（单页和多页）。
- 上传额外的文本信息以及图像。
- 强大的安全功能。支持 SSL 和 Windows/Forms/Basic 身份验证。
- 一维和二维条形码阅读器和 OCR 插件都作为您的附加选择提供。
图像捕获和上传
以下各节将向您展示如何将 Dynamsoft 的 ImageCapture Suite 集成到您的 Web 应用程序中，如何实现图像/文档采集以及如何将扫描的图像存储到 Web 服务器。但是，首先请确保您已将 SDK 安装到您的开发机器上。如果您尚未这样做，这里是下载链接：ImageCapture Suite 30 天免费试用下载。
- 将 ImageCapture Suite 集成到您的 Web 应用程序。
SDK 为不同的浏览器提供两个版本。
- ActiveX 版本：适用于 Windows 上的 32 位和 64 位 IE
- 插件版本：适用于 Windows 上的 Firefox、Chrome、Safari 和 Opera
将两个版本嵌入到一个网页上很简单，这为您的客户提供了方便，无需访问多个页面即可在不同的浏览器中扫描图像。
插件版本：将以下 <embed> 标签添加到您的源代码中。
<embed type = "Application/ImageCaptureSuite-Plugin" id="DWObject" OnPostTransfer = "Dynamsoft_OnPostTransfer" OnPostAllTransfers = "Dynamsoft_OnPostAllTransfers" pluginspage = "DynamicWebTWAINPlugIn.msi" style ="width:500px; height:500px;"> </embed>
ActiveX 版本：添加以下 <object> 标签。
<object classid= "clsid:E61B84D6-979B-4864-91B7-B8C140B58D54" id="DWObject" CodeBase= "ImageCaptureSuite.cab#version=8,2" style ="width:500px; height:500px;"> <param name = "Manufacturer" value = "Dynamsoft Corporation"/> <param name = "ProductName" value = "ImageCapture Suite"/> </object>
插入以下 <object> 标签以访问和验证许可证信息。
<object classid= "clsid:5220cb21-c88d-11cf-b347-00aa00a28331" style = "display:none;"> <param name= "LPKPath" value= "ImageCaptureSuite.lpk"/> <object>
2. 捕获图像。
初始化 ImageCapture Suite 后，我们可以调用 SDK 的方法和属性。
if (DW_DWTSourceContainerID == "")
DWObject.SelectSource();
else
DWObject.SelectSourceByIndex(document.getElementById(DW_DWTSourceContainerID).selectedIndex);
DWObject.CloseSource();
DWObject.OpenSource();
首先，我们可以使用 SelectSource() 或 SelectSourceByIndex() 来获取和选择计算机上可用的源。支持的源包括扫描仪和网络摄像头驱动程序。
if(iTwainType == 0)
{
DWObject.IfShowUI = document.getElementById("ShowUI").checked;
var i;
for(i=0;i<3;i++)
{
if(document.getElementsByName("PixelType").item(i).checked==true)
DWObject.PixelType = i;
}
DWObject.Resolution = Resolution.value;
DWObject.IfFeederEnabled = document.getElementById("ADF").checked ;
DWObject.IfDuplexEnabled = document.getElementById("Duplex").checked ;
AppendMessage("Pixel Type: " + DWObject.PixelType + "<br />Resolution: " + DWObject.Resolution + "
");
}
else
{
DWObject.IfShowUI = document.getElementById("ShowUIForWebcam").checked;
DWObject.SelectMediaTypeByIndex(document.getElementById("MediaType").selectedIndex);
DWObject.SelectResolutionForCamByIndex(document.getElementById("ResolutionWebcam").selectedIndex);
AppendMessage("MediaType: " + DWObject.MediaType + "
Resolution: " + DWObject.ResolutionForCam + "
");
}
选择源后，我们可以设置图像的属性，例如分辨率、像素类型等。扫描之前，iTwainType 用于检查所选源的类型。可以根据设备的类型（扫描仪或网络摄像头）设置不同的属性。
从选定的源获取图像。
DWObject.IfDisableSourceAfterAcquire = true;
DWObject.AcquireImage();
3. 将捕获的图像上传到您的数据库。
指定服务器信息，包括服务器名称、端口号以及是否使用 SSL。
strHTTPServer = DW_ServerName;
DWObject.HTTPPort = DW_strPort;
我们可以选择图像格式，然后将捕获的图像上传到数据库。支持的图像格式包括 BMP、PNG、JPEG、TIFF 和 PDF。在给定的示例中，您可以在网页上选择图像格式。
var CurrentPathName = unescape(location.pathname); // get current PathName in plain ASCII
var CurrentPath = CurrentPathName.substring(0, CurrentPathName.lastIndexOf("/") + 1);
strActionPage = CurrentPath + DW_ActionPage; //the ActionPage's file path
var uploadfilename = txt_fileName.value + "." + document.getElementsByName("ImageType").item(i).value;
if (strImageType == 2 && document.getElementById("MultiPageTIFF").checked) {
if ((DWObject.SelectedImagesCount == 1) || (DWObject.SelectedImagesCount == DWObject.HowManyImagesInBuffer)) {
DWObject.HTTPUploadAllThroughPostAsMultiPageTIFF(
strHTTPServer,
strActionPage,
uploadfilename
);
}
else {
DWObject.HTTPUploadThroughPostAsMultiPageTIFF(
strHTTPServer,
strActionPage,
uploadfilename
);
}
}
else if (strImageType == 4 && document.getElementById("MultiPagePDF").checked) {
if ((DWObject.SelectedImagesCount == 1) || (DWObject.SelectedImagesCount == DWObject.HowManyImagesInBuffer)) {
DWObject.HTTPUploadAllThroughPostAsPDF(
strHTTPServer,
strActionPage,
uploadfilename
);
}
else {
DWObject.HTTPUploadThroughPostAsMultiPagePDF(
strHTTPServer,
strActionPage,
uploadfilename
);
}
}
else {
DWObject.HTTPUploadThroughPostEx(
strHTTPServer,
DWObject.CurrentImageIndexInBuffer,
strActionPage,
uploadfilename,
strImageType
);
}
DW_TempStr = DW_TempStr +"Upload: " ;
if (DW_CheckErrorString()) {
if(strActionPage.indexOf("SaveToFile")!=-1)
alert(DWObject.ErrorString)//if save to file.
else
window.location = redirectURLifOK;
}
操作页面 (SaveToFile.aspx) 用于接收图像数据并将数据发送到 Web 服务器或数据库。我们将在此处使用 Web 服务器作为示例。
<%@ Page Language="C#" %>
<%
try
{
String strImageName;
HttpFileCollection files = HttpContext.Current.Request.Files;
HttpPostedFile uploadfile = files["RemoteFile"];
strImageName = uploadfile.FileName;
uploadfile.SaveAs(Server.MapPath(".") + "\\UploadedImages\\" + strImageName);
}
catch
{
}
%>
下载示例
完整的示例代码可以从本文中下载。如果您想首先查看这些功能，我们提供了在线演示。
要自定义示例代码，您可以先从 Dynamsoft 的网站下载 SDK。
ImageCapture Suite 30 天免费试用版下载
ImageCapture Suite 的一个优点是它可以方便地与条形码阅读器和 OCR 插件集成。如果您对它们感兴趣，请查看下面的演示。
如果您有任何问题，请随时通过 support@dynamsoft.com 联系我们的支持团队。