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

开发跨平台文档成像 Web 应用

Dynamsoft
emptyStarIconemptyStarIconemptyStarIconemptyStarIconemptyStarIcon

0/5 (0投票)

2013年5月23日

CPOL

3分钟阅读

viewsIcon

23545

downloadIcon

221

本文将向您展示如何使用 ImageCapture Suite 开发与所有主流浏览器兼容的跨平台文档影像解决方案。

引言

如今，文档管理是一项巨大的挑战，尤其是对于医疗保健、金融、政府等纸张密集型行业。您可能希望开发一个文档影像应用程序，该应用程序允许 Windows 或 Mac OS 用户通过浏览器轻松扫描文档或捕获图像，以便您可以更有效地管理文档/记录。

本文将向您展示如何使用 ImageCapture Suite 开发与所有主流浏览器兼容的跨平台文档影像解决方案。

背景

Dynamsoft 的 ImageCapture Suite 是一个基于浏览器的文档影像库。 它允许您从 Windows 或 Mac 上的扫描仪、网络摄像头和其他 TWAIN/UVC/WIA 兼容设备捕获图像。 如果您对 SDK 感兴趣，可以从 Dynamsoft 网站下载30 天免费试用版。

主要特点

  • 从扫描仪、网络摄像头和其他 TWAIN/WIA/UVC 兼容的影像设备捕获图像/文档。
  • 与主流浏览器兼容，包括 Windows 和 Mac 上的 IE（32 位和 64 位）、Firefox、Chrome、Safari 和 Opera。
  • 编辑图像：裁剪、更改图像大小、旋转、缩放、擦除等。
  • 将图像上传到各种位置 - 本地文件夹、FTP 站点、Web 服务器、数据库、SharePoint 库等。
  • 增强的安全性：支持 SSL 和 Windows/Forms/基本身份验证。
  • 支持的图像格式包括 BMP、JPEG、PNG、TIFF（单页和多页）和 PDF（单页和多页）。

Using the Code

跨平台和跨浏览器支持

ImageCapture Suite 针对不同的用户提供 3 个版本

ActiveX 版本 – 适用于 32 位或 64 位 Internet Explorer
插件版本 – 适用于 Windows 上的 Chrome、Firefox、Safari、Opera
Mac 版本 – 适用于 Mac 上的 Chrome、Firefox、Safari、Opera

为了使您的 Web 应用程序能够在 Windows 或 Mac 上的所有主流浏览器上运行，您可以在 JavaScript 中检测操作系统和浏览器类型，并加载 ImageCapture Suite 的相应版本。

function DW_PageonloadInner() {
    // Get User Agent Value
    ua = (navigator.userAgent.toLowerCase());
    if (ua.indexOf("wow64") == -1) {
        var samplesource32bitCtr = document.getElementById("samplesource32bit");
        if (samplesource32bitCtr)
            samplesource32bitCtr.href = "http://www.dynamsoft.com/demo/DWT/Sources/twainkit.exe";
    }
    // Set the Explorer Type
    if (ua.indexOf("msie") != -1)
        DW_InIE = true;
    else
        DW_InIE = false;
    // Set the Operating System Type
    if (ua.indexOf("macintosh") != -1)
        DW_InWindows = false;
    else
        DW_InWindows = true;
    // Set the x86 and x64 type
    if (ua.indexOf("win64") != -1 && ua.indexOf("x64") != -1)
        DW_InWindowsX86 = false;
    else
        DW_InWindowsX86 = true;


    var varShowDetail = document.getElementById("showDetail");
    if (varShowDetail && DW_InIE == true) {
        varShowDetail.style.display = "";
    }
    InitMenum();
}

function DW_CreateControl(bNeebBack) {
    var objString = "";
    var DWTContainer;

    // For IE, render the ActiveX Object
    if (DW_InIE) {
        objString = "<object id='" + DW_ObjectName + "' style='width:" + DW_Width + "px;height:" + DW_Height + "px'";

        if (DW_InWindowsX86)
            objString += "codebase='" + DW_CABX86Path + "#version=" + DW_VersionCode + "' ";
        else
            objString += "codebase='" + DW_CABX64Path + "#version=" + DW_VersionCode + "' ";

        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 += " <param name='wmode' value='transparent'/>  ";
        objString += " </object>";
    }   
    // For non-IE, render the embed object
    else {
        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>";
        else
            objString += " pluginspage='" + DW_PKGPath + "'></embed>";
    }  

    DWTContainer = document.getElementById(DW_DWTContainerID);
    DWTContainer.innerHTML = objString;
    DWObject = document.getElementById(DW_ObjectName);
}

从扫描仪或网络摄像头获取图像

相对而言，TWAIN 和网络摄像头协议都是特殊的领域，需要花费大量时间才能熟悉。从头开始编写应用程序可能需要几个月的时间。

但是，使用 ImageCapture Suite，您将能够在数小时内完成文档扫描或图像捕获编码。

您可以在代码中自定义扫描属性，例如分辨率、像素类型、亮度、对比度等。您还可以通过显示源的用户界面来设置扫描设置。

function AcquireImageInner(){
    if (DW_DWTSourceContainerID == "")
        DWObject.SelectSource(); //show the available imaging devices
    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, TWAIN devices or webcam
   
    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 + "<br />");
    }
    else
    {
        DWObject.IfShowUI = document.getElementById("ShowUIForWebcam").checked;
       
        if (DW_InWindows) {
//some webcam features only for Windows currently
        DWObject.SelectMediaTypeByIndex(document.getElementById("MediaType").selectedIndex);
        DWObject.SelectResolutionForCamByIndex(document.getElementById("ResolutionWebcam").selectedIndex);

    }
    DWObject.IfDisableSourceAfterAcquire = true;
    DWObject.AcquireImage(); //acquire image from the device
}

在 Web 服务器上运行或部署应用程序

可以从文章中下载完整的源代码。该示例包括从扫描仪或网络摄像头捕获图像、编辑图像并将图像保存到本地磁盘等功能。

要使用有效的试用许可证运行示例应用程序或自定义 Web 应用程序，您可以从 Dynamsoft 网站下载 ImageCapture Suite。
ImageCapture Suite 30 天免费试用版下载

要从不同的客户端机器测试文档影像功能，您可以简单地将示例代码复制到您的 Web 服务器（IIS、Apache 或 Tomcat）。用户只需在第一次访问网页时在浏览器中下载并安装 ActiveX/插件。更多详情

在线演示也供您参考。
ImageCapture Suite 在线演示

© . All rights reserved.