# angular-screenshot
[](https://travis-ci.org/weihanchen/angular-screenshot)
[](https://coveralls.io/github/weihanchen/angular-screenshot)
[](https://david-dm.org/weihanchen/angular-screenshot)
[](https://img.shields.io/npm/v/angular-screenshot.svg?style=flat)
Angular screenshot in directive for screen capture.
Check out the homepage at [https://weihanchen.github.io/angular-screenshot/](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. | `` |
| isOpen | false | Flag indicating that open the capture canvas. | `` |
| toolboxOptions | {"filename": "screenshot.png", "cancelText": "cancel", "downloadText": "download"} | options of screenshot toolbox | `` |
| api | {"download": download, "cancel": cancel, "downloadFull": downloadFull, "toPng": toPng} | Expose api to interactive custom template action. | `` |
## Basic Usage
Use screenshot as element or attribute, then use default template and cover children elements default
```html
...
```
Use target parameter to set screenshot section on element
```html
...
...
```
```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
...
```
```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
...
```
```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
```
```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
* [dom-to-image](https://github.com/tsayen/dom-to-image)