Screenshotting And Screenshot Editing For Feedback Form – Feedbackplus

Category: Javascript | October 23, 2022
Author:ColonelParrot
Views Total:90 views
Official Page:Go to website
Last Update:October 23, 2022
License:MIT

Preview:

Screenshotting And Screenshot Editing For Feedback Form – Feedbackplus

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/[email protected].1/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 {
  // ...
}

You Might Be Interested In:


Leave a Reply