Angular screenshot

Angular screenshot is an Angularjs directive for screen capture.

View on github Download zip

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"])
Basic usage, is-open parameter to controll screenshot open/close. 
                
                    <screenshot is-open="appCtrl.isOpen">
                        ....some child elements here.
                    </screenshot>

Options

Close screenshot default listening right click event to close, you can add key event listener to close screenshot with some key.
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
                                    }
Expose api to interactive custom template action. <screenshot target="root" isOpen="appCtrl.isOpen" toolbox-options="appCtrl.toolbarOptions" api="appCtrl.api"><screenshot>

Examples

Basic

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 to set screenshot section on element children, and use some custom options

View: 
                        
                            <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!'
                                    };
                                }
                            })()

Advance usage

Use screenshot-toolbox to customize your toolbox template, 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>
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();
                                       }
                                })();

Todo

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

References