Initial commit. \n 1. Screen capture plugin. \n 2. PNG annotation plugin
This commit is contained in:
72
submission - backup/README
Normal file
72
submission - backup/README
Normal 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
|
||||
Reference in New Issue
Block a user