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

如何在 Web 浏览器中捕获、编辑和上传图像

Dynamsoft
starIconstarIconstarIconstarIconstarIcon

5.00/5 (1投票)

2012年8月1日

CPOL

3分钟阅读

viewsIcon

61623

downloadIcon

3311

在本文中，我将向您展示如何从 Web 浏览器中捕获图像，编辑它们，然后将它们上传到您的系统。

引言

Dynamsoft 是版本控制解决方案和 TWAIN SDK 的领先提供商。其网络扫描 SDK - Dynamic Web TWAIN 允许您使用几行代码将在线文档扫描和上传功能添加到您的文档处理解决方案中。

作为一个客户端 Web 浏览器插件，Dynamic Web TWAIN 为开发人员提供了从任何 TWAIN 兼容设备（包括扫描仪、数码相机、网络摄像头等）扫描图像的能力。一旦您扫描/捕获了图像，您就可以编辑并将它们上传到您的文件系统、Web 服务器、本地磁盘或 FTP 和数据库。所有这些操作都可以通过 Web 浏览器完成，包括 32 位和 64 位 IE、Firefox、Chrome、Safari 和 Opera。

在本文中，我将向您介绍 Dynamic Web TWAIN 的主要功能，并提供示例代码以帮助您将扫描功能实现到您的 Web 应用程序中。如果您想自己尝试一下，可以免费试用 30 天进行评估。

主要特点

  • 与 32 位和 64 位 IE、Firefox、Chrome、Safari 和 Opera 兼容。
  • 支持 Windows（32 位和 64 位）和 Mac OS。
  • 从任何扫描仪、数码相机或其他 TWAIN 兼容设备扫描图像。
  • 以 BMP、JPEG、PNG、TIFF 和 PDF 等格式加载和保存图像。也支持多页 TIFF 和 PDF。

  • 支持 ADF、双面、图像预览和白页检测。
  • 在扫描前调整图像属性：亮度、对比度、像素类型、分辨率等。
  • 编辑扫描图像：旋转、裁剪、镜像、擦除、图像调整大小、缩放等。
  • 将扫描的图像保存到您的本地磁盘。
  • 将图像上传和下载到您的 Web 服务器、FTP 站点和数据库。
  • 支持图像压缩，以在上传前减小图像大小。
  • 由 VeriSign 数字化签名。
  • 支持 SSL 以确保图像数据传输的安全。
  • 支持 Windows 身份验证、表单身份验证和基本身份验证。
  • 与数据执行保护 (DEP) 和保护模式兼容。

以下附加组件可用于进一步扩展您的文档管理解决方案

Dynamsoft OCR SDK:
该插件可用于将扫描的图像转换为可搜索的 PDF 文件。

Dynamsoft 条码阅读器 SDK:
该插件检测并读取扫描文档上的 1-D 和 2-D 条码符号。

示例代码

您只需使用 Dynamic Web TWAIN 几行代码即可实现以上所有功能，而无需花费大量时间来学习 TWAIN。支持的编程语言包括 JavaScript、ASP.NET(C#)、VB.NET、ASP、JSP 和 PHP。

从扫描仪扫描图像

function btnScan_onclick() 
{
         WebTWAIN.SelectSource();
         WebTWAIN.OpenSource();
         WebTWAIN.IfShowUI = false;
         WebTWAIN.Resolution = 300;
         WebTWAIN.IfFeederEnabled = true;    
         WebTWAIN.IfDisableSourceAfterAcquire = true;

         WebTWAIN.AcquireImage();
}

编辑扫描图像

function btnShowImageEditor_onclick()
{
    WebTWAIN.ShowImageEditor();//show the user interface of Image Editor
}

function btnRotateRight_onclick() 
{
   //rotate the image by 90 degrees clockwise
   WebTWAIN.RotateRight(WebTWAIN.CurrentImageIndexInBuffer); 
}

//remove an image

function btnRemoveCurrentImage_onclick() {
    if (!CheckIfImagesInBuffer()) {
        return;
    }
    WebTWAIN.RemoveAllSelectedImages();
    if (WebTWAIN.HowManyImagesInBuffer == 0) {
        TotalImage.value = WebTWAIN.HowManyImagesInBuffer;
        CurrentImage.value = "";
        return;
    }
    else {
        UpdatePageInfo();
    }
}

//remove all images in buffer

function btnRemoveAllImages_onclick() {
    if (!CheckIfImagesInBuffer()) {
        return;
    }
    WebTWAIN.RemoveAllImages();
    TotalImage.value = "0";
    CurrentImage.value = "";
}

将图像上传到您的 Web 服务器

除了 Web 服务器之外，TWAIN SDK 还允许您将图像上传到您的数据库，包括 SQL Server 和 Oracle。您可以修改 SaveToFile.aspx 文件以满足您的需求。

function btnUpload_onclick() 
{
         var strActionPage;
         var strHostIP;
         var CurrentPathName = unescape(location.pathname); // get current PathName in plain ASCII 
            var CurrentPath = CurrentPathName.substring(0,  CurrentPathName.lastIndexOf("/") + 1); 
         strActionPage = CurrentPath + "SaveToFile.aspx"; //the ActionPage's file path
            strHostIP = "localhost"; //The host's IP or name 
            WebTWAIN.HTTPPort = 80; 
         WebTWAIN.HTTPUploadThroughPost(strHostIP,0,strActionPage,"imageData.tif");
            if (WebTWAIN.ErrorCode != 0)
                 alert(WebTWAIN.ErrorString);
            else //succeded
                        alert("Image Uploaded successfully");
}

//SaveToFile.aspx
<%@ Page Language="c#" AutoEventWireup="false" Debug="True"%>

<%
        HttpFileCollection files = HttpContext.Current.Request.Files;
        HttpPostedFile uploadfile = files["RemoteFile"];
        uploadfile.SaveAs(System.Web.HttpContext.Current.Request.MapPath(".")
+ "/" + uploadfile.FileName);
%>

部署

创建网页后，您可以将应用程序部署到您的 Web 服务器，例如 IIS、Apache、Lotus Domino 等。

  1. 生成 LPK 文件，并将其与 CAB 文件和网页一起添加到您的 Web 服务器中。
  2. 将 <object> 标签插入到您的源代码中，并确保 classid 与您使用的版本匹配。

初始化控件（试用版）

<object classid="clsid:FFC6F181-A5CF-4ec4-A441-093D7134FBF2" 
    id="DynamicWebTwain1" width="143" height="156" 
    CodeBase = "DynamicWebTWAIN.cab#version=8,0">
</object>

关于许可证信息

<object classid = "clsid:5220cb21-c88d-11cf-b347-00aa00a28331" VIEWASTEXT>
<param name="LPKPath" value="DynamicWebTwain.lpk" />
</object>

现在，最终用户可以访问网页并从他们的 Web 浏览器进行文档扫描。

下载示例

要亲自试用上述功能，您可以在此处下载示例
Dynamic Web TWAIN 示例

如果您想评估 Dynamic Web TWAIN，您可以在此处下载免费试用版
Dynamic Web TWAIN 30天免费试用

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

© . All rights reserved.