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)
For more detailed instructions, see the documentation
You can find bare-minimum demo code for screenshotting & screenshot editing in the demo/simple folder
npm:
$ npm i feedbackplus
import FeedbackPlus from 'feedbackplus'cdn via jsDelivr (or with cdnjs):
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ColonelParrot/feedbackplus@master/src/feedbackplus.min.css" />
<script src="https://cdn.jsdelivr.net/gh/ColonelParrot/feedbackplus@master/src/feedbackplus.min.js" defer></script>
<!-- html2canvas import is optionally, but provides better browser support -->
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js" defer></script>const feedbackPlus = new FeedbackPlus();...and draw to canvas
const canvas = document.getElementById("canvas");
feedbackPlus.capture().then(({ bitmap, width, height }) => {
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(bitmap, 0, 0);
});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();
});