Screenshotting And Screenshot Editing For Feedback Form – Feedbackplus

Preview:

Description:

Feedbackplus is a JavaScript library that adds convenient screenshotting functionality to your feedback form.

It uses the browser’s new display API (fallbacks to html2canvas), so you don’t need any Flash or Java plugins to achieve this little piece of magic.

In addition, your users can edit the screenshot before sending it to the server via the built-in screenshot editing feature, so misleading information is less likely to happen.

How to use it:

1. Load the Feedbackplus’ files.

<!-- Required -->
<link rel="stylesheet" href="/src/feedbackplus.min.css" />
<script src="/src/feedbackplus.min.js" defer></script>
<!-- OPTIONAL -->
<script src="https://cdn.jsdelivr.net/npm/htm[email protected]/dist/html2canvas.min.js" defer></script>

2. Initialize the Feedbackplus.

const feedbackPlus = new FeedbackPlus();

3. Capture a screenshot of the current page.

const canvas = document.getElementById("canvas");
feedbackPlus.capture().then(({ bitmap, width, height }) => {
  canvas.width = width;
  canvas.height = height;
  canvas.getContext("2d").drawImage(bitmap, 0, 0);
});

4. Show a dialog that allows the user to edit the screenshot.

feedbackPlus.showEditDialog(
  bitmap,
  function (canvas) {
    // convert a canvas to ImageBitmap
    FeedbackPlus.canvasToBitmap(canvas).then(({ bitmap }) => {
      drawBitmapToCanvas(bitmap);
      feedbackPlus.closeEditDialog();
    });
  },
  function () {
    // close the dialog
    feedbackPlus.closeEditDialog();
  }
);

5. Check whether FeedbackPlus is supported.

if (FeedbackPlus.isSupported()) {
  // ...
} else {
  // ...
}