65.9K
CodeProject 正在变化。 阅读更多。
Home

Webcam & 扫描仪：使用 Dynamsoft 从您的浏览器捕获图像

Dynamsoft
emptyStarIconemptyStarIconemptyStarIconemptyStarIconemptyStarIcon

0/5 (0投票)

2012年9月28日

CPOL

3分钟阅读

viewsIcon

22669

downloadIcon

1129

获取在单个 Web 应用程序中集成图像捕获的解决方案。实现最全面的兼容性，并从包括网络摄像头、扫描仪和采集卡在内的设备中获取图像。

目录

引言

客户总是可能使用不同的设备（如扫描仪和网络摄像头）来捕获图像和文档。例如：

  • 拍摄患者的照片，并将其与他/她的医疗文件一起上传到服务器。
  • 在银行中，代表从他们的扫描仪中获取合同和文件，同时使用网络摄像头扫描客户的身份证。
  • 跟踪员工登录状态。扫描文档并在他们检查卡车时获取图像资料。

无论这些要求如何，由于扫描仪和网络摄像头使用不同的 API，开发人员从头开始创建一个应用程序并非易事。您需要学习 TWAIN、DirectShow 和其他技术来实现这一点，并将它们嵌入到您的 Web 应用程序中。甚至不要提及与浏览器的兼容性。您的客户可能使用 IE、Firefox、Chrome、Safari 或 Opera。并且您希望您的 Web 应用程序具有最大的兼容性。

为了帮助您在几行代码内实现上述要求，Dynamsoft 提供了 ImageCapture Suite，它使您能够从扫描仪和网络摄像头获取图像。如果您想尝试这种组合，您可以从本文下载示例代码和 30 天免费试用版。

主要功能

通过使用 ImageCapture Suite，您可以获得以下好处：

  • 极佳的兼容性
    • 从扫描仪、网络摄像头、数码相机、采集卡等设备捕获图像，只要驱动程序支持 TWAIN、WIA 或 UVC。
    • 支持 IE（32 位和 64 位）、Firefox、Chrome、Safari 和 Opera。
  • 敏捷而强大

您可以轻松地将组件嵌入到您的 Web 应用程序中。图像采集、编辑和上传等功能可以在几行代码内实现。

示例代码

您可以在安装文件夹的 Resources 文件夹下找到用于部署的 ImageCapture Suite 相关文件。

  • ImageCaptureSuite.cab
  • ImageCaptureSuitex64.cab
  • ImageCaptureSuitePlugIn.msi
  • ImageCaptureSuiteMacEditionTrial.pkg 
// For IE, render the ActiveX Object
objString = "<object id='" + DW_ObjectName + "' style='width:" + DW_Width + "px;height:" + DW_Height + "px'";
        if (DW_InWindowsX86)
            objString += "codebase='" + DW_CABX86Path + "#version=" + DW_VersionCode + "' "; // For 32-bit IE, render the x86 cab file
        else
            objString += "codebase='" + DW_CABX64Path + "#version=" + DW_VersionCode + "' "; // For 64-bit IE, render the x64 cab file

        var temp = DW_IsTrial ? DW_TRAILCLASSID : DW_FULLCLASSID;
        objString += " classid='clsid:" + temp + "' viewastext>";
        objString += " <param name='Manufacturer' value='DynamSoft Corporation' />";
        objString += " <param name='ProductFamily' value='" + DW_ProductName + "' />";
        objString += " <param name='ProductName' value='" + DW_ProductName + "' />";
        objString += " </object>";

ActiveX 版本

对于相应的 IE 版本，有 32 位和 64 位 CAB 文件。根据需要选择合适的版本。ImageCapture Suite 的试用版和完整版使用不同的类 ID。

插件 & Mac 版本

插件和 Mac 版本可以在基于 Gecko 的浏览器中使用，包括 PC 和 Mac OS X 上的 Firefox、Chrome、Safari 和 Opera。

        objString = " <embed id='" + DW_ObjectName + "'style='display: inline; width:" + DW_Width + "px;height:" + DW_Height + "px' id='" + DW_ObjectName + "' type='" + DW_MIMETYPE + "'";
        objString += " OnPostTransfer='Dynamsoft_OnPostTransfer' OnPostAllTransfers='Dynamsoft_OnPostAllTransfers'";
        objString += " OnMouseClick='Dynamsoft_OnMouseClick'  OnPostLoad='Dynamsoft_OnPostLoadfunction'";
        objString += " OnImageAreaSelected = 'Dynamsoft_OnImageAreaSelected'";
        objString += " OnImageAreaDeSelected = 'Dynamsoft_OnImageAreaDeselected'";
        objString += " OnMouseDoubleClick = 'Dynamsoft_OnMouseDoubleClick'";
        objString += " OnMouseRightClick = 'Dynamsoft_OnMouseRightClick'";
        objString += " OnTopImageInTheViewChanged = 'Dynamsoft_OnTopImageInTheViewChanged'";
        objString += " OnGetFilePath='Dynamsoft_OnGetFilePath'";
        if (DW_InWindows)
            objString += " pluginspage='" + DW_MSIPath + "'></embed>"; // For non-IE on Windows, render the plugin edition

        else
            objString += " pluginspage='" + DW_PKGPath + "'></embed>";// For non-IE on Mac OS X, render the Mac edition

获取图像

一旦您嵌入了控件，您就可以从您的设备中捕获图像和文档。以下几行示例代码向您展示如何获取图像。

function AcquireImageInner(){
    if (DW_DWTSourceContainerID == "")
        DWObject.SelectSource();
    else
        DWObject.SelectSourceByIndex(document.getElementById(DW_DWTSourceContainerID).selectedIndex);
    DWObject.CloseSource();
    DWObject.OpenSource();
    var iSelectedIndex = document.getElementById(DW_DWTSourceContainerID).selectedIndex;

    var iTwainType = DWObject.GetSourceType(iSelectedIndex); // check the device type, whether twain device or webcam
    
    if(iTwainType == 0)  // for TWAIN scanners
    {
        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.SelectMediaTypeByIndex(document.getElementById("MediaType").selectedIndex);
        DWObject.SelectResolutionForCamByIndex(document.getElementById("ResolutionWebcam").selectedIndex);

    }
    }
    DWObject.IfDisableSourceAfterAcquire = true;
    DWObject.AcquireImage();
}

以上只是一个简单的例子。根据您的要求，您可以向您的源代码中添加更多图像属性，例如页面大小和亮度。如果您希望您的客户拥有完全的权限来自定义这些属性，您可以将 IfShowUI 设置为 true，以让应用程序显示源的界面。

加载图像

除了从扫描仪或网络摄像头捕获图像外，您还可以加载本地磁盘上现有的图像（bmp、jpg、pdf、tif、png），并在浏览器中的控件中显示该图像。

function btnLoad_onclick() {
    DWObject.IfShowFileDialog = true; // show the Open File dialog for browsing the images
    DWObject.LoadImageEx("", 5);
}

获取免费试用版

您可以从本文下载详细的示例代码。同时，您可以获得ImageCapture Suite 的 30 天免费试用版并亲自尝试。

如果您有任何问题，可以联系我们的支持团队，邮箱地址为 support@dynamsoft.com。

© . All rights reserved.