72 lines
1.8 KiB
Plaintext
72 lines
1.8 KiB
Plaintext
# Screen Capture and Image Annotation Project
|
|
|
|
This project provides two main functionalities:
|
|
1. Screen Capture: A pluggable web control to capture the current browser viewport.
|
|
2. Image Annotation: A tool to annotate PNG images with arrows, textboxes, and symbols.
|
|
|
|
## Features
|
|
|
|
### Screen Capture
|
|
- Capture the current browser viewport as a PNG image.
|
|
- Exclude sensitive information from inputs and textareas.
|
|
- Capture modals and floating elements.
|
|
- Save the captured image as a PNG file.
|
|
|
|
### Image Annotation
|
|
- Upload and display PNG images.
|
|
- Add arrows, textboxes, and symbols to the image.
|
|
- Erase annotated elements.
|
|
- Save the annotated image as a Base64 PNG string.
|
|
|
|
## Installation
|
|
|
|
1. Clone the repository:
|
|
```
|
|
git clone https://github.com/your-username/screen-capture-annotation-project.git
|
|
```
|
|
|
|
## Usage
|
|
|
|
### Screen Capture
|
|
|
|
Include the necessary files in your HTML:
|
|
|
|
```html
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
|
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
|
|
<script src="plugin_capture_screen.js"></script>
|
|
<link rel="stylesheet" href="capture-screen.css">
|
|
```
|
|
|
|
Initialize the plugin on a button:
|
|
|
|
```javascript
|
|
$('.capture-screen').screenshotButton();
|
|
```
|
|
|
|
### Image Annotation
|
|
|
|
Include the necessary files in your HTML:
|
|
|
|
```html
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script src="plugin_display_png.js"></script>
|
|
<link rel="stylesheet" href="display-png.css">
|
|
```
|
|
|
|
Initialize the plugin on a container:
|
|
|
|
```javascript
|
|
$('.annotator-png').annotatorPNG();
|
|
```
|
|
|
|
## Testing
|
|
|
|
To run the tests:
|
|
|
|
1. Open the test views in your browser.
|
|
|
|
|
|
## Known bugs
|
|
- Colour picker button must be clicked to set colour of active canvas object after selecting colour |