📖 View this page in our documentation

Easily scan documents via the device camera using image processing to automatically enhance and optimize the scanned image. Streamline document uploads from customers and employees while reducing errors and missing information.

The GoNative Document Scanner module detects document outlines, corrects for angle and aspect ratio, adjusts text sharpness, and provides a clear final scan automatically cropped to the document. The result is an improved user experience and increased quality scan versus using the device camera standalone. Use this module to improve scanning of all rectangular documents such as receipts, business cards, contracts, etc.

The scanned image is made available as a base64 jpeg file through the GoNative JavaScript Bridge where it can be attached to a form or uploaded to your server asynchronously.

The iOS module version relies exclusively on open source and GoNative code and there is no additional license or ongoing fees. The Android version utilizes a third-party vendor which requires a license, please contact us for preferred rates.

Implementation Guide

Once the premium module has been added to your app, you may use the following GoNative JavaScript Bridge commands to access its functionality.

Create a javascript function to accept a scanned image. It will be called with an object with the fields:

  • image: a base64 encoded string representing the jpeg image file
  • mimeType: 'image/jpeg'
  • encoding: 'base64'

View GoNative JavaScript Bridge example code in our documentation

Here is the source code for a demo that simply displays the scanned image.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document Scanner Test</title>
<script>
function callback(data) {
document.getElementById('page').setAttribute('src', 'data:' + data.mimeType +
';' + data.encoding + ', ' + data.image);
}
</script>
<style>
img
{
    max-width: 100%;
    min-width: 300px;
    height: auto;
}
</style>
</head>
<body>

<h1>Document Scanner test</h1>

<p><a href="gonative://documentScanner/scanPage?callback=callback">Scan page</a></p>

<p><img id="page" src=""/></p>

</body> 
</html>