Initial commit. \n 1. Screen capture plugin. \n 2. PNG annotation plugin

This commit is contained in:
2024-08-19 08:58:38 +01:00
parent 6e3fc47d36
commit 40a8406427
40 changed files with 5622 additions and 0 deletions

View File

@@ -0,0 +1,72 @@
# 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