If you are developing to deal with different digital file formats featured Web application, chances will be a must-have PDF file format. The text and graphics pages into PDF will generate a file compression and visual clarity, you can usually use Adobe Reader to read the file on your PC or Mac.
Obtain documents from the scanner, your Web application needs to be able to pass some of the scanning protocol to communicate with the scanner. This will give you two choices:
- Spend a lot of time and effort to find the TWAIN standard
- Using readily available third-party SDK available
Taking into account the convenience of using a third-party SDK and convenience, compared to the enormity of time and the learning curve of new research protocols, we recommend that you choose SDK. If you want to free up time to focus on projects and instead turn our attention to the task may increase the project or project cycle time, then it is reasonable to use the SDK.
Dynamic Web TWAIN is the industry-leading document scanning TWAIN SDK on the market. It has been included IBM, Lockheed Martin , Intel, Samsung, NASA, Disney, Mercedes-Benz and many other Fortune 500 companies. Dynamic Web TWAIN to be easily integrated and user-friendly known. Within 5 minutes or less, you can build a web page to scan the document to PDF format.
In this tutorial, we will show you step by step how to build a simple HTML page to scan a document and save it as a PDF file.
Four simple steps:
- Start a Web application
- The Dynamic Web TWAIN added to the HTML page
- Use Dynamic Web TWAIN scan or load an image
- Save the image as a PDF file
Step 1: Start a Web application
Download the free Dynamic Web TWAIN 30-day trial version .
After installation, you can default in C: \ Program Files (x86) \ Dynamsoft \ Dynamic Web TWAIN SDK to find it in 15.3.1 Trial.
1. The Dynamsoft the Resources folder to your project
Generally can be copied from the following location Resources folder
C: \ Program Files (x86) \ Dynamsoft \ Dynamic Web TWAIN SDK {Version Number} {Trial} \
Please note that there are three folders:
- Documents help documentation and Developer's Guide
- Resources needed to build the SDK files scanned pages
- Samples Dynamic Web TWAIN sample
Create an empty HTML page
please send a blank html page and put together the Resources folder, as shown below:
Step 2: Dynamic Web TWAIN added to the HTML page
2.1 In <head>the JS file contains two Dynamsoft.
<script type="text/javascript" src="Resources/dynamsoft.webtwain.initiate.js"></script>
<script type="text/javascript" src="Resources/dynamsoft.webtwain.config.js"></script>
2.2 Adding Dynamic Web TWAIN container to <body>the.
<div id="dwtcontrolContainer" ></div>
//
Note: " dwtcontrolContainer" is the default id for the div. You can change it in the dynamsoft.webtwain.config.js if necessary.
Step 3: Using Dynamic Web TWAIN scanning or image loading
Adding buttons to scan and load the page:
<input type="button" value="Scan" onclick="AcquireImage();" />
<input type="button" value="Load" onclick="LoadImage();" >
And add functions AcquireImage()and LoadImage(). Note LoadImage()how the callback function OnSuccess()and OnFailure()treatment successes and failures:
function AcquireImage() {
if (DWObject) {
DWObject.SelectSource();
DWObject.OpenSource();
DWObject.IfDisableSourceAfterAcquire = true; // Scanner source will be disabled/closed automatically after the scan.
DWObject.AcquireImage();
}
}
//Callback functions for async APIs
function OnSuccess() {
console.log('successful');
}
function OnFailure(errorCode, errorString) {
alert(errorString);
}
function LoadImage() {
if (DWObject) {
DWObject.IfShowFileDialog = true; // Open the system's file dialog to load image
DWObject.LoadImageEx("", EnumDWT_ImageType.IT_ALL, OnSuccess, OnFailure); // Load images in all supported formats (.bmp, .jpg, .tif, .png, .pdf). OnSuccess or OnFailure will be called after the operation
}
}
Step 4: Save the image as a PDF file
We are now 1 minute left, is not it? Now, we have two options can be loaded in the document to a Dynamic Web TWAIN:
- From the scanner to scan a document
AcquireImage()( ); - Local hard disk or load a document
LoadImage()( ).
Now is the time to add a button to save the page:
<input type="button" value="Save" onclick="SaveWithFileDialog();" />
Adding to save the document to a PDF of logic:
function SaveWithFileDialog() {
if (DWObject) {
if (DWObject.HowManyImagesInBuffer &amp;amp;amp;amp;gt; 0) {
DWObject.IfShowFileDialog = true;
DWObject.SaveAllAsPDF("DynamicWebTWAIN.pdf", OnSuccess, OnFailure);
}
}
}
Now, save the file.
That's it. Congratulations, you have just set up a website in 5 minutes, or load the webpage can scan a document and save it as a PDF file.
You can open HelloWorld.html in the browser and test it.
You can load a local document or scanned documents into Web pages. Let's try to scan. This is a page when you click "Scan" button Appearance:
Please note, "Select Source" dialog box lists only TWAIN-compliant scanners. If you really do not have a scanner, you can install a virtual scanner test, which is what I did. If you have a scanner, but does not appear in the list, check out this article for solutions.
After performing the scanning example page, it looks like this:
Of course, you can by clicking the "Save" button to save it as a PDF file.
This is the complete code for this page:
<html>
<head>
<title>Hello World</title>
<script src="Resources/dynamsoft.webtwain.initiate.js"> </script>
<script src="Resources/dynamsoft.webtwain.config.js"> </script>
</head>
<body>
<input type="button" value="Scan" onclick="AcquireImage();" />
<input type="button" value="Load" onclick="LoadImage();" />
<input type="button" value="Save" onclick="SaveWithFileDialog();"/>
<div id="dwtcontrolContainer"></div>
<script type="text/javascript">
var DWObject;
function Dynamsoft_OnReady() {
DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
}
function AcquireImage() {
if (DWObject) {
DWObject.SelectSource(function () {
DWObject.OpenSource();
DWObject.AcquireImage();
},
function () {console.log("SelectSource failed!"); });
}
}
function LoadImage() {
if (DWObject) {
DWObject.IfShowFileDialog = true; // Open the system's file dialog to load image
DWObject.LoadImageEx("", EnumDWT_ImageType.IT_ALL, OnSuccess, OnFailure); // Load images in all supported formats (.bmp, .jpg, .tif, .png, .pdf). OnSuccess or OnFailure will be called after the operation
}
}
function OnSuccess() {
console.log('successful');
}
function OnFailure(errorCode, errorString) {
alert(errorString);
}
function SaveWithFileDialog() {
if (DWObject) {
if (DWObject.HowManyImagesInBuffer > 0) {
DWObject.IfShowFileDialog = true;
DWObject.SaveAllAsPDF("DynamicWebTWAIN.pdf", OnSuccess, OnFailure);
}
}
}
</script>
</body>
</html>
Further
The above example is very simple, function is also very good. But sometimes, you may want to do things further. For example, how to automatically save the document as PDF without having to manually click the "Save" button do?
Use Dynamic Web TWAIN's event mechanism is actually very easy to do.
Dynamic Web TWAIN provides a number of event for users to subscribe to. When it reaches certain trigger point will trigger events. For example, we have a OnMouseClick event for the click of the mouse, a OnPostTransfer event for the end of a transmission image, and so on.
Therefore, the function Dynamsoft_OnReady()at the end, just add:
if (DWObject) {
DWObject.RegisterEvent('OnPostAllTransfers', SaveWithFileDialog);
}
that's it.
to sum up
This is a simple example to show you how to use Dynamic Web TWAIN scan a document and save it as a PDF file. If you want to learn more about Dynamic Web TWAIN more information on how to help your project, we recommend that you read the Developer's Guide .
Let me know your thoughts and questions in the comments.
PS If you need to save for other image formats, such as BMP, JPEG, TIFF, you can Dynamic Web TWAIN trial package the exact code examples found in.
