How can I scan a document using ASP.net MVC 5 with

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

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