<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">
<link data-require="bootstrap@4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<link data-require="bootstrap-material-design@4.0.2" data-semver="4.0.2" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.10/css/bootstrap-material-design.css" />
<link data-require="bootstrap-material-design@4.0.2" data-semver="4.0.2" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.10/css/ripples.css" />
<link data-require="angular-screenshot@0.1.1" data-semver="0.1.1" rel="stylesheet" href="https://cdn.rawgit.com/weihanchen/angular-screenshot/df72febb/build/angular-screenshot.min.css" />
<script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="bootstrap-material-design@4.0.2" data-semver="4.0.2" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.10/js/material.js"></script>
<script data-require="bootstrap-material-design@4.0.2" data-semver="4.0.2" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.10/js/ripples.js"></script>
<script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<script data-require="angular-screenshot@0.1.1" data-semver="0.1.1" src="https://cdn.rawgit.com/weihanchen/angular-screenshot/3e0c1bc7/build/angular-screenshot.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="AppController as appCtrl">
<div class="row">
<div class="col-md-12">
<div class="jumbotron">
<h1>Angular screenshot</h1>
<p>Angular screenshot is an Angularjs directive for screen capture.</p>
<p>
<a class="btn btn-primary btn-raised" href="https://github.com/weihanchen/angular-screenshot" target="_blank"><i class="fa fa-github" aria-hidden="true"></i> View on github</a>
<a class="btn btn-primary btn-raised" href="https://github.com/weihanchen/angular-screenshot/archive/master.zip" target="_blank"><i class="fa fa-cloud-download" aria-hidden="true"></i> Download zip</a>
</p>
<h3>Basic</h3>
<div class="panel panel-info">
<div class="panel-heading">
<div class="btn-group-sm pull-right">
<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>
</div>
<h4>
</h4>
</div>
<screenshot is-open="appCtrl.isBasicOpen">
<div class="panel-body white-bg">
Enthusiasm is one of the most powerful engines of success. When you do a thing, do it with your might. Put your whole soul into it. Stamp it with your own personality. Be active, be energetic, be enthusiastic and faithful, and you will accomplish your object. Nothing great was ever achieved without enthusiasm.
</div>
</screenshot>
</div>
<hr />
<h3>Custom toolbox</h3>
<div class="panel panel-info">
<div class="panel-heading clearfix">
<div class="btn-group-sm pull-right">
<button class="btn btn-fab btn-default" ng-click="appCtrl.isAdvanceOpen = !appCtrl.isAdvanceOpen">
<i ng-if="!appCtrl.isAdvanceOpen" class="material-icons">crop</i>
<i ng-if="appCtrl.isAdvanceOpen" class="material-icons">close</i>
</button>
</div>
</div>
<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 white-bg">
If you think of it in terms of the Gold Rush, then you'd be pretty depressed right now because the last nugget of gold would be gone. But the good thing is, with innovation, there isn't a last nugget. Every new thing creates two new questions and two new opportunities.
Wanting something is not enough. You must hunger for it. Your motivation must be absolutely compelling in order to overcome the obstacles that will invariably come your way.
</div>
</screenshot>
</div>
</div>
</div>
</div>
</body>
</html>
(function(){
angular.module('app', ['angular-screenshot'])
.controller('AppController', [appController])
function appController() {
var self = this;
self.cancel = cancel;
self.download = download;
self.advanceApi;
function cancel() {
if (self.advanceApi) self.advanceApi.cancel();
}
function download() {
if (self.advanceApi) self.advanceApi.download();
}
}
})()
/* Styles go here */
.white-bg {
background: #fff;
}
# angular-screenshot
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
<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:
```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} | 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
<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 parameter to set screenshot section on element
```html
<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>
```
```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 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>
```
## 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)