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)
| 
|
(click images to enlarge)
## Quickstart For more detailed instructions, see the [documentation](https://github.com/ColonelParrot/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(); }); ```