Security News
The Dark Side of Open Source
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
angular-screenshot
Advanced tools
Readme
Angular screenshot in directive for screen capture.
Check out the homepage at https://weihanchen.github.io/angular-screenshot/
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"])
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> |
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 parameter to set screenshot section on element
<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>
'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!'
};
}
})()
Use screenshot-toolbox
to customize your toolbox, 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>
'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
<button class="btn btn-fab" ng-class="{true: 'btn-danger', false: 'btn-default'}[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>
<button class="btn btn-fab" ng-if="appCtrl.isFullOpen" ng-click="appCtrl.downloadFull()">
<i class="material-icons">file_download</i>
</button>
<!--screenshot-->
<screenshot is-open="appCtrl.isFullOpen"api="appCtrl.fullScreenApi" >
<div class="panel-body">
...
</div>
</screenshot>
'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.
<button class="btn btn-fab" ng-class="{true: 'btn-danger', false: 'btn-default'}[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>
</button>
<screenshot is-open="appCtrl.isUrlOpen" api="appCtrl.imageApi">
<screenshot-toolbox>
<div class="btn-group-sm">
<button class="btn btn-success" ng-click="appCtrl.sendImage()">
sendImage
</button>
</div>
</screenshot-toolbox>
</screenshot>
'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...
});
}
}
}
})();
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.FAQs
Angular screenshot in directive for screen capture.
The npm package angular-screenshot receives a total of 78 weekly downloads. As such, angular-screenshot popularity was classified as not popular.
We found that angular-screenshot demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.