Do you want to make your own feedback form with screenshot taking & screenshot editing functionality?
Let's make one just like Google's
Luckily for you, there's a library built already for this purpose. Introducing, FeedbackPlus.
ColonelParrot / feedbackplus
Screenshotting and screenshot editing for your feedback forms with JavaScript.
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 (try it out!)
(click images to enlarge)
Quickstart
For more detailed instructions, see the documentation
Import
npm:
npm i feedbackplus
cdn:
<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();
Capture Screenshot
...and…
With FeedbackPlus, you can capture screenshots without having to worry about browser support. The library uses the browser's display API to ensure the screenshot is accurate, and fallbacks to html2canvas for better browser support.
Screenshotting
// import FeedbackPlus from 'feedbackplus/src/feedbackplus'
// ^^^ if you're using node ^^^
const feedbackPlus = new FeedbackPlus();
feedbackPlus.capture().then(result => ...)
You can then very quickly just draw the result to a 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);
});
Screenshot Example
<canvas id="canvas"></canvas>
<button id="btn">Take screenshot</button>
const canvas = document.getElementById("canvas")
btn.addEventListener('click', () => {
feedbackPlus.capture().then(({ bitmap, width, height }) => {
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(bitmap, 0, 0);
})
})
Editing Screenshot
Once you have obtained the image bitmap from a screenshot, you can store it in a variable and pass it to showEditDialog
to edit it.
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();
}
);
It's that easy! Try it out yourself with the demo.
Top comments (0)