• Stars
    star
    868
  • Rank 52,564 (Top 2 %)
  • Language
    JavaScript
  • License
    Other
  • Created over 12 years ago
  • Updated over 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Feedback form with screenshot

feedback.js - Feedback form with screenshot

wip... preview available at http://experiments.hertzen.com/jsfeedback/

This script allows you to create feedback forms which include a screenshot, created on the clients browser, along with the form. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.

How does it work?

The script is based on the html2canvas library, which renders the current page as a canvas image, by reading the DOM and the different styles applied to the elements. This script adds the options for the user to draw elements on top of that image, such as mark points of interest on the image along with the feedback they send.

No plugins, no flash, no interaction needed from the server, just pure JavaScript!

Building feedback.js

  1. Install rake and uglifier at the command line if you don't already have it (uglifier is only needed if you are going to compile the minified version)
    gem install rake
    gem install uglifier
  1. Navigate to the feedback.js directory in the terminal and run one of the following
    rake compile_unminified
    rake compile_minified
    rake compile_all

Browser compatibility

  • Firefox 3.5+
  • Newer versions of Google Chrome, Safari & Opera
  • IE9

License

feedback.js is released under the MIT license:

More Repositories

1

html2canvas

Screenshots with JavaScript
TypeScript
30,457
star
2

php.js

PHP to JavaScript converter and VM written in JavaScript
PHP
859
star
3

base64-arraybuffer

Encode/decode base64 data into ArrayBuffers
TypeScript
353
star
4

WebGL-GTA

JavaScript implementation of GTA
JavaScript
258
star
5

html2canvas-proxy-nodejs

Express middleware proxy for html2canvas
JavaScript
119
star
6

css-line-break

A JavaScript library for Line Breaking and identifying Word Boundaries, implementing the Unicode Line Breaking Algorithm (UAX #14)
TypeScript
115
star
7

react-bacon-flux-poc

JavaScript
70
star
8

WebGL-CSS-Shaders

CSS Shaders through WebGL
JavaScript
54
star
9

jquery.plugin.clipboard

jQuery plugin to modify the contents copied to clipboard
JavaScript
37
star
10

click-heatmap

Click heatmaps with Google Analytics
JavaScript
36
star
11

html2canvas-proxy

Proxies for html2canvas
Python
32
star
12

experiments.hertzen.com

Random mini experiments
HTML
19
star
13

CSS3-Shapes

CSS3 shape editor
JavaScript
18
star
14

text-segmentation

A JavaScript library for Grapheme Breaking and identifying Grapheme Boundaries, implementing the Unicode Line Breaking Algorithm (UAX #29)
TypeScript
15
star
15

mongoose-validators

Validators for Mongoose schemas with validator.js
JavaScript
13
star
16

webdriver.js

jQuery styled WebDriver bindings for node.js
JavaScript
13
star
17

jquery.plugin.placeholder

Add placeholder functionality to non-HTML5 browsers
JavaScript
8
star
18

html5-parser

html5 parser for node.js and browsers
JavaScript
8
star
19

webidl.js

WebIDL parser for JavaScript
JavaScript
6
star
20

3d-dom

http://blog.hertzen.com/post/68191200228/rendering-webpages-in-3d-with-javascript-and-webgl
JavaScript
4
star
21

css-values

JavaScript
3
star
22

utrie

Unicode Trie
TypeScript
3
star
23

reactive-templates

JavaScript
2
star
24

node-tus

Node.js resumable upload middleware
JavaScript
2
star
25

hertzen.com

CSS
1
star