|
日历归档 |
|
|
| << < 2024 - 04 > >> | | Su | Mo | Tu | We | Th | Fr | Sa | | | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
|
|
|
|
|
|
About Me |
|
|
|
|
ZhangSichu |
|
|
Male |
|
|
32 |
|
|
ZhangSichu@gmail.com |
|
|
ZhangSichu@hotmail.com |
|
|
ZhangSichu.com |
|
|
weibo.com/zhangsichu |
|
|
|
|
|
|
个人推荐 |
|
|
|
|
|
|
|
|
|
分类归档 |
|
|
|
|
|
|
|
|
My Friends |
|
|
|
|
|
|
|
Html5 FileReader 对文件进行Base64编码
|
以Base64进行编码的数据Url开始越来越广泛的被应用起来，原来做Base64转换要自己写一个小程序来转，其实Html5的FileReader的readAsDataURL方法读取出的数据就已经是Base64数据格式的Url了，利用FileReader实现一个对本地文件进行读取并且转换为Base64 Url的页面也非常简单。
页面地址: http://zhangsichu.com/html5/filereader/base64dataurl.htm
最近IPhone比较火，这里用IPhone做了一个背景，选取一个本地文件，拖拽到那个IPhone上面的拖拽区域，下面就会得到对应的Base64 Url 编码。在Chrome和FireFox下通过测试可以正常工作，在大文件测试下Chrome要比FireFox快一些。
在例子中的那个IPhone背景图片就使用了data Url.在实际应用中对于过大文件进行Base64编码的意义其实不是很大，自己测试的结果是，一般编码后整体结果会增大1/3。
Base64Url 具体介绍
http://en.wikipedia.org/wiki/Data_URI_scheme
它的优点和缺点，上面的wiki页面已分析的非常清晰了，其中有一条是：It is possible to manage a multimedia page as a single file.
根据Base64 data URI scheme:
data:[<MIME-type>][;charset=<encoding>][;base64],<data>
|
可以看到MIME-type中支持多种type，记得IE中有一个功能是把一个网页保存成一个.mht文件，all in one 所有的外链资源和页面都保存在一起，只保存成一个文件，这样用户在离线状态下也可以完整的浏览这个页面，FireFox 和 Chrome 没有类似的功能，它们保存整个页面时新建一个和网页同名的文件夹，把外部链接资源都保存到这个文件夹中，同时修改保存页面中链接的位置到这个新建的文件夹。根据data Url格式，应该在 FireFox和Chrome下实现这种保存网页all in one，只保存成一个文件的功能也不会太难了，完全可以根据data Url的格式，将外部链接资源编码成base64 Url然后替换原始的Url保存成一个单独的Html文件。在FireFox 和Chrome的最新版本中还没有这个功能，是否在未来的版本中会加入这个功能，我想他们应该会吧，这种all in one单页面的保存方式方便的将多个资源保存在一个文件里了，说不定已经有了这种FireFox插件，不过我还没有找到。
Html5 的FileReader 中除了readAsDataURL 还有好几个其它的文件读取方法: readAsBinaryString() readAsText() readAsArrayBuffer()
Html5 FileRead 具体介绍:
http://www.w3.org/TR/FileAPI/#FileReader-interface
|
|
|
|
|
|
|
2024年4月18日 星期四
