angular-screenshot

Angular screenshot in directive for screen capture.

Check out the homepage at https://weihanchen.github.io/angular-screenshot/

Installation

Get angular screenshot from bower, npm, or git.

$npm install angular-screenshot
$bower install angular-screenshot
$git clone https://github.com/weihanchen/angular-screenshot.git

Add dependencies to the section of your index.html

<meta charset="utf-8">  
<link href="node_modules/angular-screenshot/build/angular-screenshot.min.css" rel="stylesheet" />
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-screenshot/build/angular-screenshot.min.js"></script>

Add angular-screenshot dependency to module:

angular.module("app", ["angular-screenshot"])

Options

Basic Usage

Use screenshot as element or attribute, then use default template and cover children elements default

<button class="btn btn-fab" ng-class="{true: 'btn-danger', false: 'btn-default'}[appCtrl.isBasicOpen]" ng-click="appCtrl.isBasicOpen = !appCtrl.isBasicOpen">
	<i ng-if="!appCtrl.isBasicOpen" class="material-icons">crop</i>
	<i ng-if="appCtrl.isBasicOpen" class="material-icons">close</i>
</button>
<!--screenshot-->
<screenshot is-open="appCtrl.isBasicOpen">
	<div class="panel-body">
		...
	</div>
</screenshot>

Use target parameter to set screenshot section on element

<div id="target1" class="panel panel-info">
	...
	<div class="panel-body">
		<screenshot target="{{::'#target1'}}" is-open="appCtrl.target1Open" toolbox-options="appCtrl.target1Options"></screenshot>
			...
	</div>
</div>

'use strict';
(function () {
angular.module('app', ['angular-screenshot'])
.controller('AppController', ['$scope', appController]);
	function appController($scope) {
		var self = this;
		self.target1Options = {
			filename: 'target1.png',
			downloadText: 'Download me',
			cancelText: 'Close it!'
		};
	}
})()

Advanced usage

Use screenshot-toolbox to customize your toolbox, then use expose api to interactive with directive.

<screenshot is-open="appCtrl.isAdvanceOpen" api="appCtrl.advanceApi">
	<screenshot-toolbox>
	<div class="btn-group-sm">
		<button class="btn btn-default btn-fab" ng-click="appCtrl.cancel()">
			<i class="material-icons">close</i>
		</button>
		<button class="btn btn-success btn-fab" ng-click="appCtrl.download()">
			<i class="material-icons">check</i>
		</button>
	</div>
	</screenshot-toolbox>
	<div class="panel-body">
		...
	</div>
</screenshot>

 'use strict';
(function () {
	angular.module('app', ['angular-screenshot'])
		.controller('AppController', ['$scope', appController])
		function appController() {
			var self = this;
			self.advanceApi;
			self.cancel = cancel;
			self.download = download;
		function cancel() {
			if (self.advanceApi) self.advanceApi.cancel();
		}
		function download() {
			if (self.advanceApi) self.advanceApi.download();
		}
})();

Use screenshot as element or attribute, then use expose api to download full dom content

<button class="btn btn-fab" ng-class="{true: 'btn-danger', false: 'btn-default'}[appCtrl.isFullOpen]" ng-click="appCtrl.isFullOpen = !appCtrl.isFullOpen">
	<i ng-if="!appCtrl.isFullOpen" class="material-icons">crop</i>
	<i ng-if="appCtrl.isFullOpen" class="material-icons">close</i>
</button>
	<button class="btn btn-fab" ng-if="appCtrl.isFullOpen" ng-click="appCtrl.downloadFull()">
	<i class="material-icons">file_download</i>
</button>
	<!--screenshot-->
<screenshot is-open="appCtrl.isFullOpen"api="appCtrl.fullScreenApi" >
	<div class="panel-body">
	...
	</div>
</screenshot>

'use strict';
(function () {
angular.module('app', ['angular-screenshot'])
	.controller('AppController', ['$scope', appController])
	function appController() {
		var self = this;
		self.fullScreenApi;
		self.downloadFull = downloadFull;
	function downloadFull() {
		if (self.fullScreenApi) self.fullScreenApi.downloadFull();
	}
})();

Use screenshot as element or attribute, then use expose api to send image data to backend api.

<button class="btn btn-fab" ng-class="{true: 'btn-danger', false: 'btn-default'}[appCtrl.isUrlOpen]" ng-click="appCtrl.isUrlOpen = !appCtrl.isUrlOpen">
	<i ng-if="!appCtrl.isUrlOpen" class="material-icons">crop</i>
	<i ng-if="appCtrl.isUrlOpen" class="material-icons">close</i>
</button>
<screenshot is-open="appCtrl.isUrlOpen" api="appCtrl.imageApi">
	<screenshot-toolbox>
		<div class="btn-group-sm">
			<button class="btn btn-success" ng-click="appCtrl.sendImage()">
				sendImage
			</button>
		</div>
	</screenshot-toolbox>
</screenshot>

'use strict';
(function () {
	angular.module('app', ['angular-screenshot'])
		.controller('AppController', ['$scope', appController])
		function appController() {
			var self = this;
			self.imageApi;
			self.sendImage = sendImage;
			function sendImage() {
				if (self.imageApi) {
					self.imageApi.toPng(function (dataUrl) {
						console.log(dataUrl);
						//you can post dataUrl to your backend api, then do more feature like send mail...
					});
				}
			}
		}
})();

Use screenshot as element or attribute, then use expose api to print.

<button class="btn btn-fab" ng-class="{true: 'btn-danger', false: 'btn-default'}[appCtrl.isUrlOpen]" ng-click="appCtrl.isPrintOpen = !appCtrl.isPrintOpen">
	<i ng-if="!appCtrl.isPrintOpen" class="material-icons">crop</i>
	<i ng-if="appCtrl.isPrintOpen" class="material-icons">close</i>
</button>
<screenshot is-open="appCtrl.isPrintOpen" api="appCtrl.printApi">
	<screenshot-toolbox>
		<div class="btn-group-sm">
			<button class="btn btn-success" ng-click="appCtrl.print()">
				Print
			</button>
		</div>
	</screenshot-toolbox>
</screenshot>

'use strict';
(function () {
	angular.module('app', ['angular-screenshot'])
		.controller('AppController', ['$scope', appController])
		function appController() {
			var self = this;
			self.printApi;
			self.print = print;
			function print() {
				if (self.printApi) {
					self.printApi.toPng(function (dataUrl) {
						  let windowContent = '';
						  windowContent += '';
						  windowContent += '';
						  windowContent += '';
						  windowContent += '<img src="' + dataUrl + '">';
						  windowContent += '';
						  windowContent += '';
                                            
						  const printWin = window.open(
						      '',
						      '',
						      'width=' + 1000 + ',height=' + 1000
						  );
						  printWin.document.open();
						  printWin.document.write(windowContent);
                                            
						  printWin.document.addEventListener(
						      'load',
						      function() {
						      printWin.focus();
						      printWin.print();
						      printWin.document.close();
						      printWin.close();
						      },
						      true
						  );
					});
				}
			}
		}
})();

Development scripts

• npm run dev: webpack lite server auto reload on changed.
• npm run build: generate built files and minified ones.
• npm run watch: watch source files and run build script.
• npm run release: increase package version.

Development requirements

• nodejs ^6.0.0

Todos

• Capture with font can cause some problem, and this bug still trying fix.
• RWD issue fix.
• Add saveas feature.

References

• dom-to-image