靠谱的软件下载站
当前位置:  IEfans/IE专区/IE相关/IE10新特性:通过 BlobBuilder 创建文件

IE10新特性:通过 BlobBuilder 创建文件

IE相关 互联网 2012-02-05 阅读(1984)
由于网站越来越多地转向 Web 应用程序,所以能够以更有作为的方式处理文件变得越来越重要。从 IE10 平台预览第二版开始,IE10 支持文件 API(File API),令开发人员可以读取和切分客户端上的文件。IE10 平台预览第四版增加了对 BlobBuilder 的支持,开发人员可以通过该属性创建新文件。IE10 浏览器还有两种新方法,允许用户将 blob 保存到其计算机,从而在处理客户端驻留的数据时实现极佳的端到端体验。 在 IE Test Drive 网站上,我们提供了一个有趣的钢琴演示, 用来演示 BlobBuilder 和文件 API 功能。当按动钢琴上的音键时,网站会构建两个文件:一个 mp3 音乐文件,和一个记录音乐得分的 SVG 文件。您可以看到,每次按下一个音键时,两个文件的大小也随之变化。按播放按钮可以听到您演奏的曲调,或者按钢琴键上面的链接可以下载音乐文件或 SVG 得分文件。在本博文中,我将详细介绍这个演示如何工作,重点介绍 BlobBuilder 和文件 API 的功能。 BlobBuilder 钢琴演奏测试驱动程序演示的屏幕截图

BlobBuilder 功能

顾名思义,BlobBuilder 是指一种在客户端上构建 blob 的方式。完成此项任务的主要方法是 append。append 函数接受三种数据类型:
  • Blob 对象
  • 纯文本
  • 数组缓存
钢琴演示使用一个 blob 代表一个音符,再将 blob 附加到一起,从而创建 mp3 文件。该演示通过附加包含 SVG 源的文本,来创建包含音乐得分的 SVG 文件。 getBlob 是 BlobBuilder 对象上的另一种可用方法,它将返回一个 blob 对象,其中包含以前附加的所有项。下面是利用 BlobBuilder 创建文本文件的一个简单示例:
// The BlobBuilder constructor is prefixed in all browsers.

// Use MSBlobBuilder in IE, MozBlobBuilder in Firefox, and WebKitBlobBuilder in WebKit-based browsers.

var bb = new MSBlobBuilder();

bb.append("Hello World!");

var blob1 = bb.getBlob("text/plain");
关于 getBlob 方法要注意的一件事是,当您在 IE10 和 Firefox 调用 getBlob 时,将会清除 BlobBuilder 对象的内容,所以下次您调用附加时,就好象您附加到一个新的 BlobBuilder 对象一样。在调用 getBlob 后,WebKit 当前不会清除 BlobBuilder 的内容。请看以下示例:
var bb = new MSBlobBuilder();

bb.append("Hello World!");

var blob1 = bb.getBlob("text/plain");

bb.append("BlobBuilder is great");

var blob2 = bb.getBlob("text/plain");
在所有浏览器中,blob1 将包含文本“Hello World!”。但 blob2 则不然。在 IE10 和 Firefox 中,blob2 将包含文件“BlobBuilder is great”,而在基于 WebKit 的浏览器中,它将包含文本“Hello World!BlobBuilder is great”。Web 应用程序工作组仍在对这种差别进行热烈讨论

通过 XHR 获取 Blob

文件 API 会令您方便地访问用户选择的文件,我在 Magnetic Poetry 演示中演示了这项功能。当您想要将用户拥有的数据合并到您的网站时,这个功能非常有用。不过,在钢琴演示中,我需要将音符文件内置到演示中。当您想要使用 blob 但又希望提供数据时,您可以使用 XHR。 IE10 的新增功能是 XHR responseType 属性。responseType 属性支持四个值:blob、array buffer、text 和 document。在钢琴演示的初始化方法中 - getBlobs() - 您将看到以下内容:
var req = new XMLHttpRequest();

var url = 'PianoNotes/AllNotes2.mp3';

req.open('GET', url, false);

req.responseType = "blob";

req.onload = function () { /* ... */ };

req.send(null);
您可能会注意到该演示仅发出一个单一 XHR 请求。它仅下载一个文件,包含演示中使用的所有音符。不过,当您在演示中按下一个键时,只会发出一个单一的音符,网站仅将该单一音符附加到 mp3 文件。为了实现上述所述,在下载包含所有音符的文件后,网站会使用文件 API slice 方法对文件进行切分,然后提取出 24 个音符。与下载 24 个文件相比,这是极大的性能改进。

创建音乐文件

如果在演示中每个音符分别对应有一个 blob,则创建 mp3 文件非常简单。每次您按一个键,我将调用:
musicBlobBuilder.append(noteBlob);
为了更新文件大小,我获取该 blob,然后获取文件大小。
var musicBlob = musicBlobBuilder.getBlob("audio/mp3");

// display musicBlob.size
最终,因为我知道当我调用 getBlob 时 BlobBuilder 对象的内容已经清除,我只需将 blob 重新附加到以下内容中:
musicBlobBuilder.append(musicBlob);

创建 SVG 文件

每次您在演示中按下一个键,您就会看到一个音符添加到音乐得分中。音乐得分由一个单一的 SVG 元素计算得出,包含在一个名为“scoreContainer”的 div 中。每次您按下一个键,该脚本会运行,就将一个音符添加到 SVG 元素,然后通过附加该源创建 SVG 文件:
svgBlobBuilder.append(document.getElementById("scoreContainer").innerHTML);

var svgBlob = svgBlobBuilder.getBlob("image/svg+xml");

// display svgBlob.size
在这种情况下,我不会重填 svgBlobBuilder,因为我希望下次当用户按下某个键时,从一个空白曲调开始。

将文件保存到磁盘

该演示的最后一部分是将文件保存到磁盘。当您按钢琴键顶部的“Music File”(音乐文件)和“Musical Score File”(音乐得分文件)链接时,您将可以保存文件,不过感觉上类似于下载一个文件: IE10 中显示的通知栏,响应对 msOpenOrSaveBlog() 的调用。 请注意,通知栏在 Platform Preview 各版本中不可用。而是呈现一个保存对话框。 每个链接调用 saveSong() 或 saveSheetMusic()。查看下面的每个方法会看到他们使用 msSaveOrOpenBlob 函数的情况:
window.navigator.msSaveOrOpenBlob(svgBlob, "MusicScore.svg");
msSaveOrOpenBlob 和 msSaveBlob 是 IE10 中提供的两种方法,允许网站询问用户是否将 blob 保存到他们的计算机。 调用 msSaveOrOpenBlob 将会在通知栏上提供一个打开该文件的选项(除了保存或取消选项之外)。调用 msSaveBlob 仅提供保存文件或取消文件的选项。尽管这些功能尚未包含进任何标准,我们相信他们对于利用 blob 编写端到端方案特别有用,希望他们将来某一天成为标准。 创建钢琴演示是一个有趣的体验,我将非常高兴看到你们使用 BlobBuilder 的情况。欢迎您的任何反馈! —Internet Explorer 项目经理 Sharon Newman 英文原文:Creating Files through BlobBuilder

标签:特性IE10IE WebBlobBuilder

Copyright © 1998-2017 www.iefans.net All Rights Reserved 湘ICP备13012168号-17