| Taking a Screenshot | Editing screenshot | | --------------------------------------------- | ----------------------------------------------------- | | | |

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/[email protected]/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();
});