angular-screenshot

Angular screenshot in directive for screen capture.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
angular-screenshot
3450.4.16 years ago6 years agoMinified + gzip package size for angular-screenshot in KB

Popular Searches

Readme

angular-screenshot
Build Status Coverage Status dependencies Status npm 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 ```html ``` Add angular-screenshot dependency to module: ```javascript 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 ```html 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>
<div class="panel-body">
...
</div>
``` Use target parameter to set screenshot section on element ```html 
...
<div class="panel-body">
<screenshot target="{{::'#target1'}}" is-open="appCtrl.target1Open" toolbox-options="appCtrl.target1Options"></screenshot>
...
</div>
``` ```javascript '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. ```html 
<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>
``` ```javascript '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 ```html 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 class="btn btn-fab" ng-if="appCtrl.isFullOpen" ng-click="appCtrl.downloadFull()">
<i class="material-icons">file_download</i>
<!--screenshot-->
<div class="panel-body">
...
</div>
``` ```javascript '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. ```html 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>
<screenshot-toolbox>
<div class="btn-group-sm">
<button class="btn btn-success" ng-click="appCtrl.sendImage()">
sendImage
</button>
</div>
</screenshot-toolbox>
``` ```javascript '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