《总结Weibo Indicator：一些常识和Canvas的使用》
做了一个简单的GM脚本：Webio Indicator。
根据Weibo的未读数，改变该页Favicon的色彩，达到提醒的目的。（如果提示数字的话比较伤脑细胞吧）
下面是对于制作过程涉及到的知识点做个总结：
- Favicon是什么？和Link什么关系？
- Data URI Scheme
- Canvas和Image
- RGB和HSL
Favicon和Link
Faviocon就是网页标签上的那个小图片，一般可以在domain/favicon.ico 这个地址找到。
Html的link标签，一般都是type=“css/text” 引入css文件。但如果type=“icon”的话可以控制favicon（见参考一）
修改link标签的rel属性也可以设置favicon。具体见How to add a favicon to you site
Weibo Indicator的目标是”修改“这个图标的色彩，达到友好提示目的。实现的方式其实是替换，即替换link。
Data URI Scheme
通过link可以替换favicon，接下来需要设置link的src属性指定图片了。
考虑到图片其实是一直需要变化的。所以采用的方式是Data URI，以便后面动态的计算和修改。
Data URI 可以用文字表示各类资源：图片、音频、脚本文件等等。（见参考二）
Canvas和Image
已经知道link可以修改favicon、Data URI可以表示一张图片。接下来的工作就是改变图片。
这里用到HTML5的Canvas以及Image的知识
Canvas顾名思义是一张画布，在画布上画图形的api是drawImage，来自context2d的方法。
画了张思维导图理清canvas, context2d, image, data uri 之间的关系。
从上面的导图可以看到画图像的方法有三种，下面是对其的测试效果。
- 下图上层的logo是原图。
- 下图第二层1～4 是第一种普通画法（3个参数）。也是脚本实际效果的大号实现！
- 下图第二层5 是 缩放的画法（5个参数）。
- 下图第二层6是 缩放加上剪切的画法（9个参数）。
Image是每种drawImage都需要的参数。
它可以是一个img标签，也可以是一个Image对象。（见参考三）
1 this.drawAnFavicon = function(scale) {
2 var aImage = new Image();
3 aImage.src = icoUrl;
4 ....
5 aImage.addEventListener("load", this);
6 }
有了Image对象，就可以把他丢到画布上准备修改了。
1 this.handleEvent = function(evt) {
2 this.canvasContext.clearRect(0, 0, size, size);
3 // scaling 16*16
4 this.canvasContext.drawImage(evt.target, 0, 0, size, size);
5 var tmpData = this.canvasContext.getImageData(0, 0, size, size);
6 this.hightLightImage(tmpData.data, size, size, olderScale);
7 this.canvasContext.putImageData(tmpData, 0, 0);
8 this.setFavicon(this.canvas.toDataURL());
9 }
RGB和HSL
上面代码片段的第五行是从画布上取出像素。每个像素是用四个数据：RGBA来表示的（红绿蓝Alpha）。
Weibo Indecator的需求是要在黑白和彩色之前转换。RGBA就显得先天不足的。
好在有另外一种表示颜色的格式HSL：即色相、饱和度、亮度。需要做的就是把每个像素转换成HSL，调节饱和度再转回RGBA
下面是试验时的效果图：
第一、二行：对色块和图像调节色相值
第三行：调节饱和度
第四行：调节亮度
如果需要黑白化就是把饱和度调成0，最后采用的是另外一个相对简单的计算公式来实现。
1 this.hightLightImage = function(data, h, w, pct) {
2 pct = (pct < lowest) ? lowest: pct;
3 var h2 = h * (1 - pct),
4 delimiter = w * h2 * 4;
5 for (var i = 0, n = delimiter; i < n; i += 4) {
6 var grayscale = data[i] * .3 + data[i + 1] * .59 + data[i + 2] * .11;
7 data[i] = grayscale;
8 data[i + 1] = grayscale;
9 data[i + 2] = grayscale;
10 }
11 }
Weibo Indicator
GM是firefox浏览器的扩展，可以方便修改网页。而Weibo Indicator是一个GM脚本。
Weibo Indicator 不仅仅针对新浪微薄。你可以通过配置适用任何网页，实现Favicon的柔和提醒。
脚本地址：http://userscripts.org/scripts/show/121179
脚本源码：http://userscripts.org/scripts/review/121179
参考：
4、http://zh.wikipedia.org/zh/HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4
3、https://developer.mozilla.org/en/Canvas_tutorial/Using_images
2 、http://en.wikipedia.org/wiki/Data_URI_scheme
1、 http://www.w3.org/TR/html5/links.html#rel-icon
