Skip to content

ColonelParrot/feedbackplus

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
March 13, 2023 20:37
src
March 11, 2023 19:25
December 29, 2022 22:39
October 25, 2022 20:19
March 11, 2023 19:25
March 11, 2023 19:25






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

You can find bare-minimum demo code for screenshotting & screenshot editing in the demo/simple folder

Import

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();

Capture Screenshot

...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);
});

Showing Edit Dialog for Screenshot

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();
});

About

Screenshotting and screenshot editing for your feedback forms with JavaScript.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published