How can I scan a document using ASP.net MVC 5 with the help of Twain

Question

Please help me out by sharing the step by step procedure to achieve the scanning functionality using Twain in ASP.Net MVC5. Thank you

Answer 1

Solution is here:

1. In ASP.Net/Core Project you send message to call winform project:

           var start = function () {
           var i = 0;
           var wsImpl = window.WebSocket || window.MozWebSocket;
           window.ws = new wsImpl('ws://localhost:8181/');
           ws.onmessage = function (e) {
               $('#submit').hide();
               $('#scanBtn').hide();
               $('.loader').show();
               if (typeof e.data === "string") {
                   //IF Received Data is String
               }
               else if (e.data instanceof ArrayBuffer) {
                   //IF Received Data is ArrayBuffer
               }
               else if (e.data instanceof Blob) {
                   i++;
                   var f = e.data;
                   f.name = "File" + i;
                   storedFiles.push(f);
                   formdata.append(f.name, f);
                   var reader = new FileReader();
                   reader.onload = function (e) {
                       var html = "<div class=\"col-sm-2 text-center\" 
                   style=\"border: 1px solid black; margin-left: 2px;\"><img 
                   height=\"200px\" width=\"200px\" src=\"" + e.target.result + "\" 
                   data-file='" + f.name + "' class='selFile' title='Click to 
                   remove'><br/>" + i + "</div>";
                       selDiv.append(html);
                       $('#submit').show();
                       $('#scanBtn').show();
                       $('.loader').hide();
                   }
                   reader.readAsDataURL(f);
               }
           };
           ws.onopen = function () {
               //Do whatever u want when connected succesfully
           };
           ws.onclose = function () {
               $('.dalert').modal('show');
           };
       }
       window.onload = start;
       function scanImage() {
           ws.send("1100");
       };
   

https://javascript.info/websocket

2. In Winforms Project you scan document and send graphic data back to Asp.Net/Core project:

   public partial class Form1 : Form { ImageCodecInfo _tiffCodecInfo; TwainSession _twain; bool _stopScan; bool _loadingCaps; List allSockets; WebSocketServer server; public Form1() { InitializeComponent();

    if (NTwain.PlatformInfo.Current.IsApp64Bit)
   {
       Text = Text + " (64bit)";
   }
   else
   {
       Text = Text + " (32bit)";
   }
   foreach (var enc in ImageCodecInfo.GetImageEncoders())
   {
       if (enc.MimeType == "image/tiff") { _tiffCodecInfo = enc; break; }
   }
   
   this.WindowState = FormWindowState.Minimized;
   this.ShowInTaskbar = false;
   
   allSockets = new List<IWebSocketConnection>();
   server = new WebSocketServer("ws://0.0.0.0:8181");
   server.Start(socket =>
   {
       socket.OnOpen = () =>
       {
           Console.WriteLine("Open!");
           allSockets.Add(socket);
       };
       socket.OnClose = () =>
       {
           Console.WriteLine("Close!");
           allSockets.Remove(socket);
       };
       socket.OnMessage = message =>
       {
           if (message == "1100")
           {
               this.Invoke(new Action(()=> {
                   this.WindowState = FormWindowState.Normal;
               }));
           }
       };
   });
   

   }

Link to project.

https://github.com/mgriit/ScanAppForWeb

You can remake this project, as you want.

Answer 2

At this moment, none of the browsers support scanning out of the box. You need to use a third-party library (not part of Microsoft's .NET core components). Below example uses Scanner.js, which is a product offered by our company:

Enable Scanning from TWAIN Scanners to ASP.NET Pages: Step by Step

Below steps use Scanner.js as example; they may differ for other products.

1) Include the scanning library in your HTML code:

<script type="text/javascript" src="//asprise.azureedge.net/scannerjs/scanner.js"></script>

2) Add a button to trigger the scanning process:

function scanToJpg() {
   scanner.scan(displayImagesOnPage,
   {
  "twain_cap_setting" : {
    "ICAP_PIXELTYPE" : "TWPT_RGB", // Color
    "ICAP_XRESOLUTION" : "100", // DPI: 100
    "ICAP_YRESOLUTION" : "100",
    "ICAP_SUPPORTEDSIZES" : "TWSS_USLETTER" // Paper size: TWSS_USLETTER, TWSS_A4, ...
  },
      "output_settings" :
      [
         {
            "type" : "return-base64",
            "format" : "jpg"
         }
      ]
   }
   );
}

3) Handle the scan result - display, upload, etc.

Below code creates an img element for each image scanned to display on the current web page:

/** Processes the scan result */
function displayImagesOnPage(successful, mesg, response) {
   var scannedImages = scanner.getScannedImage(response, true, false); // returns an array of ScannedImage
   for(var i = 0; (scannedImages instanceof Array) && i < scannedImages.length; i++) {
      var scannedImage = scannedImages[i];
      processScannedImage(scannedImage);
   }
}

/** Images scanned so far. */
var imagesScanned = [];

/** Processes a ScannedImage */
function processScannedImage(scannedImage) {
   imagesScanned.push(scannedImage);
   var elementImg = createDomElementFromModel( {
       'name': 'img',
       'attributes': {
           'class': 'scanned',
           'src': scannedImage.src
       }
   });
   document.getElementById('images').appendChild(elementImg);
}

For examples of scanning into PDF formats and direct uploading, please visit the code repository: https://github.com/Asprise/scannerjs.javascript-scanner-access-in-browsers-chrome-ie.scanner.js