作者：许多 Web 应用程序使用图片上传器：图片托管网站、博客发布应用程序、社交网络等等。这些上传器有一些限制：你不能一次上传多个文件，也不能在发送之前编辑图片。插件是上传多个图片的常见解决方案，图片修改通常在服务器端进行，这会使编辑过程变得更加繁琐。
Firefox 3.6 为 Web 开发人员提供了许多新的开放 Web 功能，包括更多 HTML5 支持。本文将介绍如何使用开放 Web 技术创建复杂的图片编辑器和上传器。
请查看下面的演示视频以及一些背景信息。
托管在 hacks 上，发布到 twitpic
我们的 Web 应用程序将图片上传到 twitpic，一个为 Twitter 提供图片托管服务的网站。
请注意，此应用程序的代码实际上托管在hacks Web 服务器上，但仍然可以上传到 Twitpic。能够上传到 Twitpic 是因为他们为类似这样的应用程序开放了他们的 API 用于跨域 XMLHttpRequest。（感谢twitpic！）。
Web 功能
演示使用了 Firefox 3.6 中包含的 HTML5 中的以下功能
- HTML5 拖放：你可以将项目拖放到网页内，也可以将图片从你的桌面直接拖放到浏览器中。
- HTML5
localStorage：用于在浏览器重新启动之间存储图片数据 - HTML5 应用程序缓存：这使你能够创建可以在浏览器未连接到 Internet 时使用的应用程序。它将整个应用程序存储在浏览器中，还提供对在线和离线事件的访问，这样你就能知道何时需要将数据与服务器同步。
- HTML5 Canvas：整个演示中都使用了 HTML5 Canvas 元素来编辑和渲染图片。
- 跨域资源共享 用于在一个站点上托管应用程序并在另一个站点上发布数据。
演示中包含什么？
请查看实时演示，亲自尝试一下图片上传器。你需要Firefox 3.6 和一个twitter 帐户。
以下是此应用程序可以执行的所有操作的完整列表
- 你可以将图片从你的桌面或 Web 拖放到应用程序中。
- 你可以查看想要上传的每张图片的预览。
- 你可以将预览拖放到垃圾箱中以删除图片。
- 如果图片的宽度大于 600 像素，它会自动缩小。
- 你可以在上传之前编辑任何图片。这包括能够旋转、翻转、裁剪或将图片转换为黑白。
- 如果你编辑了图片，它会保存在本地，以便你即使在离线时也能进行编辑。如果你关闭了选项卡，重新启动了 Firefox 或你的计算机，这些图片在你再次加载页面时仍然存在，以便你可以在重新连接时上传。
- 它会一次上传多个文件，并在上传过程中提供反馈。
- HTML5 离线应用程序缓存使应用程序的加载速度非常快，因为它完全存储在离线状态。
幕后
让我们快速了解一下我们在此应用程序中使用到的所有技术。
跨 XMLHttpRequest
Twitpic 很乐意开放他们的 API 以允许来自任何其他域的 XMLHttpRequest。这意味着你现在可以从自己的网站使用他们的 API 并提供自己的图片上传器。
如果你正在运行一个带有 API 的网站，你希望人们从其他网站使用它，你可以使用跨站点 HTTP 请求。为了支持它，你需要在你的 Web 服务器响应中添加一个 HTTP 标头，说明你允许哪些域。例如，以下是 twitpic 如何允许来自所有域的访问
Access-Control-Allow-Origin: *
需要注意的是，开放你的 API 确实存在安全隐患，因此在盲目开放 API 之前，你应该仔细了解这些问题。有关更多详细信息，请参阅 MDC 关于 CORS 的文档。
拖放
拖放 是一种具有两个重要功能的机制
- 将文件从你的桌面拖放到你的网页。
- 在你的网页内进行原生拖放（不仅仅是改变元素的坐标）。
图片上传器使用拖放功能来允许用户从桌面添加文件，删除文件（将它们拖放到垃圾箱）以及将新图片插入当前图片。
有关拖放的更多信息，请参阅之前的 hacks 文章，尤其是如何在你的应用程序中使用拖放。
使用 Canvas 编辑图片
将图片拖放到网页后，图片上传器允许你在上传之前编辑它们。这是因为图片实际上是通过文件 API复制到 canvas 元素中的。
在这种情况下，编辑过程非常简单：旋转、翻转、添加文本、黑白、裁剪。但是，你可以想象在你的编辑器版本中提供更多其他功能（例如，请参阅Pixastic 或此镶嵌功能此处）。
使用 canvas 和文件 API 也允许你在发送之前调整图片大小。在这里，每张图片都被转换为一个新的图片（canvas），宽度小于 600 像素。
localStorage：保存本地数据
可以使用 localStorage 在网页中持久存储本地数据，每个域最多可以存储 5 兆字节的数据。
在图片上传器中，localStorage 用于存储图片和凭据。由于图片实际上是 canvas，因此你可以将它们存储为数据 URL
var url = canvas.getContext("2d").toDataURL("image/png");
localStorage.setItem("image1", url);
LocalStorage 支持意味着你可以编辑一张图片，关闭 Firefox，关闭你的计算机，然后在你重新启动 Firefox 时编辑后的图片仍然存在。
离线
如果你添加一个清单文件，列出显示 Web 应用程序所需的所有远程文件，那么即使你未连接到 Internet，它也能正常工作。一个不错的副作用是，它还会使你的应用程序加载速度更快。
在这里，html 元素引用一个清单文件
清单文件如下所示
CACHE MANIFEST # v2.4 index.xhtml fonts/MarketingScript.ttf css/desktop.css css/fonts.css css/mobile.css [...]
你还可以捕获离线和在线事件，以便了解连接状态是否发生了变化。
有关更多信息，请参阅我们关于离线的上一篇文章.
结论
Firefox 3.6 使数百万用户能够利用现代标准，包括 HTML5。
这里介绍的图片上传器展示了网页如何真正被视为一个应用程序，因为它可以与你的桌面交互并在离线状态下工作。
以下是一些使用开放 Web 技术编写下一个应用程序的提示
允许跨 XMLHttpRequest
如果对你的服务有意义，请允许人们从不同的域访问你的 API，你会惊讶于人们会想出多少应用程序。
允许多个输入
让人们将文件拖放到你的应用程序中，并使用 <input type="file" multiple="">，以便他们可以一次选择多个文件。在此演示中，我们使用一个仅在移动版本中可见的多输入，但出于可访问性考虑，请不要忘记使用它来提供拖放的替代方案。
使用原生拖放
拖放机制通常是模拟的（在 mousemove 事件上更新坐标）。如果可以，请使用原生机制。
使用文件 API
在与服务器通信之前预处理文件。
支持离线
存储数据并使用清单文件使你的应用程序数据在离线状态下持久化。
使用 Canvas
Canvas 是最广泛实现的 HTML5 元素。它在所有地方都能正常工作（即使它需要模拟），请使用它！
思考“客户端”：HTML5、CSS3 和新的强大 JavaScript 引擎使你能够创建令人惊叹的应用程序，充分利用它们！
我们期待看到你使用开放 Web 技术创建的精彩新应用程序！
关于 Paul Rouget
Paul 是一位 Firefox 开发人员。
44 条评论