# 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