How do i get the scanned image from Scanner as an input for HTML File input field using web twain?

3.1k views Asked by At

How do i get the image output from Scanner as a file input for HTML File Input field. I am using the dynasoft web twain api for scanning the images.http://www.dynamsoft.com/Support/DWTGuide/Dynamic%20Web%20TWAIN%20SDK.html#Manual

Snippet to acquire the scan image -

    var DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
    DWObject.IfDisableSourceAfterAcquire = true;    // Source will be closed automatically after acquisition.
    DWObject.SelectSource();                        // Select a Data Source (a device like scanner) from the Data Source Manager.
    DWObject.OpenSource();                          // Open the source. You can set resolution, pixel type, etc. after this method. Please refer to the sample 'Scan' -> 'Custom Scan' for more info.
    DWObject.AcquireImage();

Snippet for file input -

<input type="file" id="fileselect" accept="image/*,application/pdf" capture="camera" app-file-select="onFileSelect($files)" app-change="getFile($files)" app-model="file" style="display:none">

The Html file is being processed as a MultipartFile on the server side.

Thanks in advance

2

There are 2 answers

0
yushulx On

You don't need to create an input element. Just use the API HTTPUploadAllThroughPostAsPDF or HTTPUploadThroughPostAsMultiPagePDF. On the server side, you can use any programming languages you like.

For example, ASP.NET:

<%@ 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
    {
    }
%>

Use RemoteFile to extract the file content.

1
misbah On

Dynamic Web Twain (DWT) doesn't provide the captured image to browser so that, browser can use it as an input field. But we must have to upload it to our server. DWT provides a number of functions for this purpose. You can use anyone of the following that fulfills your needs-

FTP functions:

  • FTPUpload()
  • FTPUploadAllAsMultiPageTIFF()
  • FTPUploadAllAsPDF()
  • FTPUploadAsMultiPagePDF()
  • FTPUploadAllAsMultiPageTIFF()
  • FTPUploadAllAsPDF()
  • FTPUploadAsMultiPagePDF()
  • FTPUploadAsMultiPageTIFF()
  • FTPUploadDirectly()
  • FTPUploadEx()

HTTP functions:

  • HTTPUploadAllThroughPostAsMultiPageTIFF()
  • HTTPUploadAllThroughPostAsPDF()
  • HTTPUploadThroughPost()
  • HTTPUploadThroughPostAsMultiPagePDF()
  • HTTPUploadThroughPostAsMultiPageTIFF()
  • HTTPUploadThroughPostDirectly()
  • HTTPUploadThroughPostEx()

You know better which one is appropriate for you. For an example, if you like to upload all images as PDF, and like to use HTTP post request, you should use 'HTTPUploadAllThroughPostAsPDF'.

DWObject.HTTPUploadAllThroughPostAsPDF(location.hostname, $POST_URL, 'my-test-file.pdf');

You probably may be needed to pass some other fields along with the file. In this case, you can use 'SetHTTPFormField'. Here is a detail example of uploading images as PDF.

DWObject.SetHTTPFormField("field1", "field1 value");
DWObject.SetHTTPFormField("field2", "field2 value");
DWObject.IfSSL = ('https:' === location.protocol);
if (location.port != '') {
    DWObject.HTTPPort = location.port;
} else {
    DWObject.HTTPPort = (DWObject.IfSSL) ? 443 : 80;
}
DWObject.HTTPUploadAllThroughPostAsPDF(location.hostname, $POST_URL, 'my-test-file.pdf');