Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/weihanchen/angular-screenshot
Angularjs directive for screen capture.
https://github.com/weihanchen/angular-screenshot
angular capture cssnext es6 karma postcss screenshot webpack2
Last synced: about 1 month ago
JSON representation
Angularjs directive for screen capture.
- Host: GitHub
- URL: https://github.com/weihanchen/angular-screenshot
- Owner: weihanchen
- License: mit
- Created: 2017-03-22T11:59:23.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-12-04T15:00:15.000Z (almost 6 years ago)
- Last Synced: 2024-10-11T14:02:20.905Z (about 1 month ago)
- Topics: angular, capture, cssnext, es6, karma, postcss, screenshot, webpack2
- Language: JavaScript
- Homepage: https://weihanchen.github.io/angular-screenshot/
- Size: 1.36 MB
- Stars: 35
- Watchers: 7
- Forks: 12
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
crop
close
...
```
### 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
close
check
...
```
```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
crop
close
file_download
...
```
```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
crop
close
sendImage
```
```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...
});
}
}
}
})();
```
### Use screenshot as element or attribute, then use expose api to print.
```html
crop
close
Print
```
```javascript
'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 += '
';
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
);
});
}
}
}
})();
```
## 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)