3 |
4 | 5 |
2 |
3 |
4 |
5 |
8 | 
9 |
10 |
11 |
12 |
14 |
15 | 
16 | 
17 |
18 |
21 | 
22 |
25 | FeedbackPlus is an open source Javascript library that allows you to add screenshot taking & screenshot editing functionality to your feedback forms.
26 |
27 | Available for use by cdn or via npm
28 |
29 | 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)
30 |
| 
|
37 |
38 | (click images to enlarge)
39 | 40 | ## Quickstart 41 | 42 | For more detailed instructions, see the [documentation](https://github.com/puffinsoft/feedbackplus/wiki) 43 | 44 | You can find bare-minimum demo code for screenshotting & screenshot editing in the [demo/simple](/docs/demos/simple/) folder 45 | 46 | ### Import 47 | 48 | npm: 49 | 50 | ```js 51 | $ npm i feedbackplus 52 | import FeedbackPlus from 'feedbackplus' 53 | ``` 54 | 55 | cdn via [jsDelivr](https://www.jsdelivr.com/package/gh/ColonelParrot/feedbackplus) (or with [cdnjs](https://cdnjs.com/libraries/feedbackplus)): 56 | 57 | ```html 58 | 59 | 60 | 61 | 62 | ``` 63 | 64 | ```js 65 | const feedbackPlus = new FeedbackPlus(); 66 | ``` 67 | 68 | ### Capture Screenshot 69 | 70 | ...and draw to canvas 71 | 72 | ```js 73 | const canvas = document.getElementById("canvas"); 74 | feedbackPlus.capture().then(({ bitmap, width, height }) => { 75 | canvas.width = width; 76 | canvas.height = height; 77 | canvas.getContext("2d").drawImage(bitmap, 0, 0); 78 | }); 79 | ``` 80 | 81 | ### Showing Edit Dialog for Screenshot 82 | 83 | ```js 84 | feedbackPlus.showEditDialog(bitmap, function (canvas) { 85 | // user completed edit 86 | FeedbackPlus.canvasToBitmap(canvas).then(({ bitmap }) => { 87 | canvas.getContext("2d").drawImage(bitmap, 0, 0); 88 | feedbackPlus.closeEditDialog(); 89 | }); 90 | }, function () { 91 | // user cancelled edit 92 | feedbackPlus.closeEditDialog(); 93 | }); 94 | ``` 95 | -------------------------------------------------------------------------------- /docs/demos/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |Screenshot will appear here
53 | 54 |Screenshot will appear here
52 | 53 |feedback
49 |plus
50 |Screenshotting & screenshot editing for your feedback forms
52 |$ npm i feedbackplus
82 | $ import FeedbackPlus from 'feedbackplus'