Angular screenshot in directive for screen capture.
Check out the homepage at https://weihanchen.github.io/angular-screenshot/
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"])| 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> |
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><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!' }; } })()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(); } })();<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); //you can post dataUrl to your backend api, then do more feature like send mail... }); } } } })();<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 ); }); } } } })();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.
- nodejs ^6.0.0
- Capture with font can cause some problem, and this bug still trying fix.
RWD issue fix.- Add saveas feature.