https://github.com/puffinsoft/feedbackplus
Screenshotting and screenshot editing for your feedback forms with JavaScript.
https://github.com/puffinsoft/feedbackplus
feedback-form js
Last synced: 5 months ago
JSON representation
Screenshotting and screenshot editing for your feedback forms with JavaScript.
- Host: GitHub
- URL: https://github.com/puffinsoft/feedbackplus
- Owner: puffinsoft
- License: mit
- Created: 2022-10-22T22:45:53.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2025-01-26T00:26:26.000Z (over 1 year ago)
- Last Synced: 2025-01-26T01:23:04.830Z (over 1 year ago)
- Topics: feedback-form, js
- Language: JavaScript
- Homepage: https://puffinsoft.github.io/feedbackplus/
- Size: 25.1 MB
- Stars: 133
- Watchers: 3
- Forks: 8
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
FeedbackPlus is an open source Javascript library that allows you to add screenshot taking & screenshot editing functionality to your feedback forms.
Available for use by cdn or via npm
The project is inspired by Google's report an issue widget, which allows you to take & edit screenshots. Under the hood, it uses the browser display API and fallbacks to html2canvas if available (see here)
Preview (demo)
| Taking a Screenshot | Editing screenshot |
| --------------------------------------------- | ----------------------------------------------------- |
| 
| 
|
(click images to enlarge)
## Quickstart
For more detailed instructions, see the [documentation](https://github.com/puffinsoft/feedbackplus/wiki)
You can find bare-minimum demo code for screenshotting & screenshot editing in the [demo/simple](/docs/demos/simple/) folder
### Import
npm:
```js
$ npm i feedbackplus
import FeedbackPlus from 'feedbackplus'
```
cdn via [jsDelivr](https://www.jsdelivr.com/package/gh/ColonelParrot/feedbackplus) (or with [cdnjs](https://cdnjs.com/libraries/feedbackplus)):
```html
```
```js
const feedbackPlus = new FeedbackPlus();
```
### Capture Screenshot
...and draw to canvas
```js
const canvas = document.getElementById("canvas");
feedbackPlus.capture().then(({ bitmap, width, height }) => {
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(bitmap, 0, 0);
});
```
### Showing Edit Dialog for Screenshot
```js
feedbackPlus.showEditDialog(bitmap, function (canvas) {
// user completed edit
FeedbackPlus.canvasToBitmap(canvas).then(({ bitmap }) => {
canvas.getContext("2d").drawImage(bitmap, 0, 0);
feedbackPlus.closeEditDialog();
});
}, function () {
// user cancelled edit
feedbackPlus.closeEditDialog();
});
```