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

| Property | Default | Description | Sample | | ------------- | ------------- | ------------:| ---- | | target | element.children() | Use target element with capture section. | <screenshot target="root"><screenshot> | | isOpen | false | Flag indicating that open the capture canvas. | <screenshot target="{{::'#root'}}" isOpen="appCtrl.isOpen"><screenshot> | | toolboxOptions | {"filename": "screenshot.png", "cancelText": "cancel", "downloadText": "download"} | options of screenshot toolbox | <screenshot target="root" isOpen="appCtrl.isOpen" toolbox-options="appCtrl.toolboxOptions"><screenshot> | | api | {"download": download, "cancel": cancel, "downloadFull": downloadFull, "toPng": toPng} | Expose api to interactive custom template action. | <screenshot target="root" isOpen="appCtrl.isOpen" toolbox-options="appCtrl.toolbarOptions" api="appCtrl.api"><screenshot> |

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...
					});
				}
			}
		}
})();

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