Angular screenshot is an Angularjs directive for screen capture.
$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"])
Basic usage, is-open parameter to controll screenshot open/close.
<screenshot is-open="appCtrl.isOpen">
....some child elements here.
</screenshot>
| 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 |
|
options of screenshot toolbox | <screenshot target="root" isOpen="appCtrl.isOpen" toolbox-options="appCtrl.toolboxOptions"><screenshot> |
| api |
|
Expose api to interactive custom template action. | <screenshot target="root" isOpen="appCtrl.isOpen" toolbox-options="appCtrl.toolbarOptions" api="appCtrl.api"><screenshot> |
<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>
<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>
Controller:
'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!'
};
}
})()
<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>
controller:
'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();
}
})();
<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();
}
})();
<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);
alert('Please open console and print dataUrl then you can send dataUrl to your backend api do more feature like send mail.');
});
}
}
}
})();
<button class="btn btn-fab" ng-class="{true: 'btn-danger', false: 'btn-default'}[appCtrl.isPrintOpen]" 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 += 'Print canvas ';
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
);
});
}
}
}
})();