我们的图片大部分都是可以转换成 base64 编码的 data：image。 这个在将 canvas 保存为 img 的时候尤其有用。虽然除 ie 外，大部分现代浏览器都已经支持原生的基于 base64 的 encode 和 decode，例如 btoa 和 atob。（将 canvas 画布保存成 img 并强制改变 mimetype 进行下载，会在下一篇记录）

但是处于好奇心，还是驱使我去了解下 base64 编码的原理。以便也在不支持原生 base64 编码的 ie 下可以得以实现。

【已知】
canvas 提供了 toDataURL 的接口，可以方便的将 canvas 画布转化成 base64 编码的 image。目前支持的最好的是 png 格式，jpeg 格式的现代浏览器基本也支持，但是支持的不是很好。

这个工具的实现，是我长久以来的一个愿望，缘于之前看到的蓝色理想上的一个代码捕捉器。当时我下下来用了一下，没仔细研究，只觉得很难用，于是心底就有了一颗种子，希望有一天自己能开发出这样的工具。感谢伟大的谷歌，给了我一种优雅的实现方式——谷歌插件。

下面说说技术部分：

一开始用的是浏览器原生的 css rules，可是后来发现谷歌的 css rules 是经过解析的，而 ie 的不是。由于对谷歌的偏爱，所以不得不另辟蹊径。凑巧之前又看到了谷歌的另一个插件——Web Developer，可以把页面引用到的 css 文件内容都显示出来。于是，在控制台把代码复制了下来，考到了我的 js 里面。它的实现原理是用 ajax 请求把所有 css 文件内容给抓下来，这涉及到一个跨域问题。不过不用怕，我们是插件嘛，当然有特殊的权利——跨域 ajax 请求。

过去在网页上播放声音一般使用 wmp（windows media player）控件，但是 wmp 控件提供的 js 接口非常有限，更致命的是 IE only。如果不想接受 wmp 的界面，又或者想要跨平台，只能借助于 flash 了。现在 html5 标准已经原生支持音频播放，并且各大浏览器都不同程度地实现了。

关于团队合作的 css 命名规范

常用的 css 命名规则：

• 头：header
• 内容：content/container
• 尾：footer
• 导航：nav
• 侧栏：sidebar
• 栏目：column

文本溢出展示省略号的需求经常都会用到，而对于新式的浏览器，这完全不是问题，因为 css3 里面已经有实现 text-overflow：ellipsis，但是最新 w3c 文档中却移除了这个属性，即使这样，也有不少浏览器实现了这个特性。其浏览器支持情况如下：

可以看到，只有 firefox 和 opera11 一下的版本不支持这个浏览器，以此也可以放心大胆的用了。但是遇到要求高的产品经理时（╮(╯_╰)╭），就不得不考虑 firefox 等不支持的浏览器了，唯有使用 js 进行字符截断。

比较简单的截断方式就是按字符个数截断，以一个中文宽度等于两个英文宽度为前提，根据给定字符个数进行截取。但是字符在页面显示的时候，其宽度并不是一定的，会根据不同的字体和字体大小的不同而不同，更何况字母 i 和 A 的宽度是不一样的，存在 bug 且不够精确。

现在 css3 出来了， 添加了许多新特性，但由于并未全部浏览器都实现了这些特性，使用起来不太顺畅。因此，就想在使用的时候进行判断，如果有这个属性并且支持这种值，就 css 实现， 否者就用 js 实现。

比较明显的例子就是 text-overflow 这个属性，text-flow：clip 是大部分浏览器都支持的，而 text-flow：ellipsis 则在 firefox 和 10.6 版本以下 opera 上工作不了，让人相当头疼。

废话少说，判断的代码如下：

这个判断的原理是：创建一个节点，判断其的 style 属性是否含有 textOverflow 属性，有则进一步判断是否支持 ellipsis 这个值。

判断是否支持 ellipsis 值依靠的是浏览器对于非法 style 值的处理，当遇到不支持的属性值时，浏览器会直接把这个值抛弃。因此这里就可以先给 textOverflow 赋值 “ellipsis”，如果不支持，则其值肯定为空或者其它不等于 “ellipsis” 的值。因此只要判断赋值后的 textOverflow 是否等于 “ellipsis” 即可。