0.1.1 • Published 8 months ago
@thegrizzlylabs/web-geniusscan-sdk v0.1.1
GeniusScan Web SDK
Prerequisite
Content Security Policy
If your page uses Content Security Policy (CSP), you will need the following exceptions so that the GeniusScan SDK can install itself on the page:
connect-src 'self' data:;worker-src 'self' blob:;script-src 'self' 'unsafe-eval';style-src 'self' 'unsafe-inline';
License
This plugin is based on the Genius Scan SDK for which you need to set up a license. You can already try the "demo" version for free by not setting a license key, the only limitation being that the app will exit after 60 seconds.
To buy a license:
- Sign up to our developer console.
- Submit a quote request for each application, using your application domain as an App ID. For example, "thegrizzlylabs.com".
- Initialize the SDK with your license key, see example below.
You can learn more about licensing on our website and contact us at sdk@geniusscan.com for further questions.
Getting started
This short guide will walk you through the steps to add a scan workflow to your existing web application.
- Add
@thegrizzlylabs/web-geniusscan-sdkto your project:
npm install --save @thegrizzlylabs/web-geniusscan-sdk- Import the library and run the scan workflow. This is a simple vanilla JS example:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>GeniusScan SDK example</title>
<script src="index.js" type="module"></script>
</head>
<body>
<h1>GeniusScan SDK: web example</h1>
<div id="container">
<button id="scan">Scan a document</button>
</div>
</body>
</html>// index.js
import { init, scanDocument } from "@thegrizzlylabs/web-geniusscan-sdk";
const LICENSE_KEY_FOR_YOUR_DOMAIN = "xxxxxx";
init(LICENSE_KEY_FOR_YOUR_DOMAIN).catch((e) => {
console.error(`Error setting GeniusScan SDK license key`, e);
});
const scanButton = document.getElementById("scan");
const container = document.getElementById("container");
scanButton.addEventListener("click", async () => {
try {
const jpegImages = await scanDocument({ highlightColor: "orange" });
for (const jpeg of jpegImages) {
const img = document.createElement("img");
const url = URL.createObjectURL(jpeg);
img.src = url;
img.onload = () => {
URL.revokeObjectURL(url);
};
container.appendChild(img);
}
} catch (error) {
console.error(error);
alert(`Error scanning document: ${error.message}`);
}
});Options
The method scanDocument() accepts an options parameter which can take the following attributes:
scanHeight: scanned document height in pixels. The actual value may be lower if the camera does not allow such a high resolution. Default is 4000px (12MP camera).multiPage: boolean (defaults to true). If true, after a page is scanned, a prompt to scan another page will be displayed. If false, a single page will be scanned.defaultFilter: the filter that will be applied by default to enhance scans, ornoneif no enhancement should be performed by default. Possible values are listed inavailableFilters. Default value isautomatic.availableFilters: an array of filters that the user can select when they tap on the edit filter button. Defaults to["auto", "strong_monochrome", "soft_grayscale", "soft_color", "strong_grayscale", "strong_color", "photo", "dark_background", "none"].jpegQuality: JPEG quality used to compress captured images. Between 0 and 100, 100 being the best quality. Default is 60.postProcessingActions: an array with the desired actions to display during the post-processing screen (defaults to all actions). Possible actions arerotate,editFilter, andcorrectDistortion.foregroundColor: string representing a color, must start with a#. The color of the icons and text (defaults to '#ffffff').backgroundColor: string representing a color, must start with a#. The color of the toolbar and screen background (defaults to black).highlightColor: string representing a color, must start with a#. The color of the image overlays (defaults to blue).