gsandaru/app.js

## app.js
var app = angular.module('app',[]);

app.controller('homeCtrl', function($scope){
var DWObject;
$scope.initiate = function () {
    Dynamsoft.WebTwainEnv.Load();
}

$scope.AcquireImage = function(){
    Dynamsoft.WebTwainEnv.RegisterEvent('OnWebTwainReady', $scope.Dynamsoft_OnReady());
}

$scope.Dynamsoft_OnReady = function () {
     var OnAcquireImageSuccess, OnAcquireImageFailure;
     OnAcquireImageSuccess = OnAcquireImageFailure = function () {
         DWObject.CloseSource();
     };
     setTimeout(function () {
         DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
         if (DWObject) {
             // to Scan multiple pages of a document
             DWObject.IfDisableSourceAfterAcquire = false;
             DWObject.SelectSource();
             DWObject.IfAutoDiscardBlankpages = true;
             DWObject.IfFeederEnabled = true;
             DWObject.OpenSource();
             DWObject.AcquireImage(OnAcquireImageSuccess, OnAcquireImageFailure);
         }
     }, 1000);
 }


$scope.saveFileAsJPG = function () {
    var OnSuccess = function() {
        console.log('successful');
    }
    var OnFailure = function(errorCode, errorString) {
        alert(errorString);
    }
    if (DWObject.HowManyImagesInBuffer == 0){
          alert("No images in buffer.");
          return;
        }
    DWObject.SaveAsJPEG("", 0, OnSuccess, OnFailure);
}


$scope.saveFileAsPDF = function () {
    var OnSuccess = function() {
        console.log('successful');
    }
    var OnFailure = function(errorCode, errorString) {
        alert(errorString);
    }
    if (DWObject.HowManyImagesInBuffer == 0){
          alert("No images in buffer.");
          return;
        }
    DWObject.SaveAsPDF("", 0, OnSuccess, OnFailure);
}


});

## index.html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Angular + Twain Web Scanner</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
    <script src="app.js"></script>

    <script src="resources/dynamsoft.webtwain.install.js"></script>
    <script src="resources/dynamsoft.webtwain.config.js"></script>
    <script src="resources/dynamsoft.webtwain.initiate.js"></script>


    <style>
        .box{
            width: 270px; height: 350px; border: 1px solid rgb(204, 204, 204);
            display: block; position: relative; background-color: rgb(255, 255, 255);
        }
    </style>
</head>

<body ng-controller="homeCtrl" ng-init="initiate()">
    <div class="container mt-2">
        <div class="row">
            <div class="col-md-4">
                    <div id="dwtcontrolContainer" class="box" ></div>
            </div>
            <div class="col-md-8 p-1">
                    <button class="btn btn-lg btn-primary" ng-click="AcquireImage()">Scan</button>
                    <button class="btn btn-lg btn-secondary" ng-click="saveFileAsJPG()">Save as JPG</button>
                    <button class="btn btn-lg btn-danger" ng-click="saveFileAsPDF()">Save as PDF</button>
            </div>
        </div>
    </div>
</body>
</html>
	var app = angular.module('app',[]);

	app.controller('homeCtrl', function($scope){
	var DWObject;
	$scope.initiate = function () {
	Dynamsoft.WebTwainEnv.Load();
	}

	$scope.AcquireImage = function(){
	Dynamsoft.WebTwainEnv.RegisterEvent('OnWebTwainReady', $scope.Dynamsoft_OnReady());
	}

	$scope.Dynamsoft_OnReady = function () {
	var OnAcquireImageSuccess, OnAcquireImageFailure;
	OnAcquireImageSuccess = OnAcquireImageFailure = function () {
	DWObject.CloseSource();
	};
	setTimeout(function () {
	DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
	if (DWObject) {
	// to Scan multiple pages of a document
	DWObject.IfDisableSourceAfterAcquire = false;
	DWObject.SelectSource();
	DWObject.IfAutoDiscardBlankpages = true;
	DWObject.IfFeederEnabled = true;
	DWObject.OpenSource();
	DWObject.AcquireImage(OnAcquireImageSuccess, OnAcquireImageFailure);
	}
	}, 1000);
	}


	$scope.saveFileAsJPG = function () {
	var OnSuccess = function() {
	console.log('successful');
	}
	var OnFailure = function(errorCode, errorString) {
	alert(errorString);
	}
	if (DWObject.HowManyImagesInBuffer == 0){
	alert("No images in buffer.");
	return;
	}
	DWObject.SaveAsJPEG("", 0, OnSuccess, OnFailure);
	}


	$scope.saveFileAsPDF = function () {
	var OnSuccess = function() {
	console.log('successful');
	}
	var OnFailure = function(errorCode, errorString) {
	alert(errorString);
	}
	if (DWObject.HowManyImagesInBuffer == 0){
	alert("No images in buffer.");
	return;
	}
	DWObject.SaveAsPDF("", 0, OnSuccess, OnFailure);
	}


	});
	<!DOCTYPE html>
	<html lang="en" ng-app="app">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Angular + Twain Web Scanner</title>

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
	<script src="app.js"></script>

	<script src="resources/dynamsoft.webtwain.install.js"></script>
	<script src="resources/dynamsoft.webtwain.config.js"></script>
	<script src="resources/dynamsoft.webtwain.initiate.js"></script>



	<style>
	.box{
	width: 270px; height: 350px; border: 1px solid rgb(204, 204, 204);
	display: block; position: relative; background-color: rgb(255, 255, 255);
	}
	</style>
	</head>

	<body ng-controller="homeCtrl" ng-init="initiate()">
	<div class="container mt-2">
	<div class="row">
	<div class="col-md-4">
	<div id="dwtcontrolContainer" class="box" ></div>
	</div>
	<div class="col-md-8 p-1">
	<button class="btn btn-lg btn-primary" ng-click="AcquireImage()">Scan</button>
	<button class="btn btn-lg btn-secondary" ng-click="saveFileAsJPG()">Save as JPG</button>
	<button class="btn btn-lg btn-danger" ng-click="saveFileAsPDF()">Save as PDF</button>
	</div>
	</div>
	</div>
	</body>
	</html>