在当今的网络世界中，用户反馈对于网站和应用程序的改进至关重要。为了更好地收集用户意见，开发者需要一个强大而灵活的工具来收集和处理这些反馈。本文将介绍一个基于Typescript、JQuery和HTML2Canvas的浏览器信息反馈工具，它可以帮助开发者轻松地从用户那里获取反馈信息。
这个工具类似于Google Feedback，它允许用户在网页上直接提供反馈，而无需离开当前页面。用户可以通过点击一个按钮来激活反馈模块，然后输入他们的反馈内容。此外，这个工具还支持屏幕截图功能，用户可以截取当前页面的截图并将其附加到反馈中。
要使用这个工具，首先需要确保网页中已经加载了JQuery。可以通过以下方式从JQuery的CDN加载它：
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
接下来，需要在HTML文件中添加html2canvas.js库，以便能够创建屏幕截图：
<script src="../src/html2canvas.js"></script>
为了使用反馈工具，还需要添加feedback.js库（这是Typescript编译后的版本）：
<script src="../src/feedback.js"></script>
此外，还需要加载反馈工具的样式表：
<link href="../src/styles/feedback.rtl.css" rel="stylesheet" />
以下是如何在网页中添加反馈按钮的示例：
<button id="content">反馈</button>
在JavaScript中，可以这样初始化反馈工具：
function onStart() {
console.log('onStart');
}
function onClose() {
console.log('onClose');
}
var options = new phoenix.feedbackOptions(onStart, onClose);
new phoenix.feedback("content", options);
或者，也可以这样初始化：
new phoenix.feedback("content", new phoenix.feedbackOptions(onStart, onClose));
在phoenix.feedbackOptions类中，可以定义五个参数，包括onStart和onClose回调函数、发送反馈数据的URL、以及服务器上模板文件的地址。默认情况下，模板文件的地址是"../src/templates/fa-Ir/templates.html"，可以根据自己的需要进行自定义。
用户提交的反馈信息将通过Ajax POST请求发送，信息格式为JSON。以下是反馈信息的示例：
{
browserInfo: {
appCodeName: navigator.appCodeName,
appName: navigator.appName,
appVersion: navigator.appVersion,
cookieEnabled: navigator.cookieEnabled,
onLine: navigator.onLine,
platform: navigator.platform,
userAgent: navigator.userAgent,
currentUrl: document.URL,
html: $('html').html().replace($('#fb-module').html(), ''),
screenSnapshot: 'base64 encoded data URI'
},
note: '用户描述'
}
这个工具支持多种浏览器，包括Internet Explorer 9及以上版本、所有版本的Google Chrome、Firefox 3.5及以上版本、以及较新版本的Safari和Opera。此外，它还支持从右到左（rtl）和从左到右（ltr）的文本方向。