op-snapshot v1.0.3
op Snapshot
op Snapshot is an Electron based tool to take a screenshot of your application.
op Snapshot will store the screenshot in the clipboard as well as in the OS temporary folder.
This tool consist of a triggerpoint (usally a button on your application) and a predefined Bootstrap modal window.
Note: You will need Electron] and Bootstrap
Example of usage in an application
Getting Started
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
Prerequisites
To use op Snapshot, you will need to have a couple of things:
Installing
Install op-snapshot NPM package
npm install op-snapshot
Create the trigger for taking a snapshot
Feel free to alter the example below to match with your applications styles and UI.
For an example of how to use this, try the following:
<!-- location to inject the modal window --> <div id="opSnaphotContainer"></div> <!-- create the button. Wrapping it in "snapshotContainer" allows for hiding this object prior to snapshot --> <div id="snapshotContainer"> <button type="button" id="btnSnapshot" class="btn btn-primary"> <i class="fas fa-camera"></i> Take a Snapshot </button> </div> <script> $(function(){ let opSnapshot = require('./op-snapshot'); // *** Ensure the relative path is correct for you project *** $("#opSnaphotContainer").load('../node_modules/op-snapshot/src/op-snapshot.html'); window.addEventListener('load', function () { setTimeout(function() { let options = { "title": document.title, "clickElemId": "btnSnapshot", "hideElemIds": ['snapshotContainer'] } opSnapshot.init(options); }, 500) }, false); }); </script>
Displaying the Release Results
Once the user clicks the button, a modal window with a thumbnail of the screenshot and instructions will appear.
Authors
- Philip Eckenroth - Initial work