如何建立一个类似Instagram的照片共享应用程序的HTML5

当我开始这个程序，我是唯一真正感兴趣的只是网络平台看到，如果真的发展到一个地步，如广受欢迎的Instagram的应用程序可以建立一个应用程序仅使用HTML，JavaScript和CSS。

事实证明，我们其实是可以这样做。本文将引导您通过技术使这成为可能，并说明它是如何建立可互操作的Web应用程序提供了极大的用户体验，不管什么品牌的浏览器用户运行的是完全可行的今天。

如果你碰巧是一个两个或两个这样的人，谁没有听说过Instagram的，那么你会很高兴听到，它是一个非常受欢迎的照片共享和社交网络服务，允许你拍照，有趣的数字滤波器应用并分享他们与世界接轨。这项服务变得如此受欢迎，它是被Facebook收购了一大袋现金和股票在2012年4月。

然而，InstaFuzz是我放在一起，虽然我不指望将予收购Facebook或别人为10亿绿色它的应用程序的名称的情况下，像这样的一个应用程序可以只使用标准的建立兼容的Web技术，如帆布，文件API，拖/降，网络工作者，ES5和CSS3和管理现代化的浏览器，如IE浏览器，谷歌Chrome 10和Firefox 上运行良好。你可以很容易地使用代码建立一个Windows应用商店的应用程序了。

 

关于应用程序

如果你想看一看应用程序，那么这里就是它托管：

http://blogorama.nerdworks.in/arbit/InstaFuzz/

只要你加载它，你的屏幕，看起来像这样：

 

我们的想法是，你可以加载到应用程序的照片，无论是大红色的“添加”按钮，左下角点击或图像文件拖放到带黑色/蓝色右侧区域。一旦你做，你得到的东西，看起来像这样：

 

你会注意到，在屏幕左侧的列表中列出的数字滤波器显示预览什么形象的样子，如果你申请上述滤波器。应用一个过滤器是一个简单的事情点击在左边的预览过滤器之一。这里是什么样子后，申请的“加权灰度”过滤器“运动模糊”。正如你可以告诉筛选的添加剂 -你点击过滤器，它们的应用是应用较早之上：

 

我们的下一个UI布局如何放在一起看看。

UI布局

HTML标记是这么少，其实我可以复制的内容在这里全部（不包括脚本包括）BODY标签：

<header>
    <div id="title">InstaFuzz</div>
</header>
<section id="container">
    <canvas id="picture" width="650" height="565"></canvas>
    <div id="controls">
        <div id="filters-list"></div>
        <button id="loadImage">Add</button>
        <input type="file" id="fileUpload"
           style="display: none;"
           accept="image/gif, image/jpeg, image/png" />
    </div>
</section>
&nbsp;
<!-- Handlebar template for a filter UI button -->
&nbsp;
<script id="filter-template" type="text/x-handlebars-template">
    <div data-filter-id="{{filterId}}">
        <div>{{filterName}}</div>
        <canvas width="128" height="128"></canvas>
    </div>
</script>

没有什么多的事情在这里。几乎一切都应该是标准票价。不过，我会提请注意这样的事实，我使用把手的 JavaScript的模板系统，这里呈现标记过滤在屏幕左侧的列表中。在HTML文件中（片段如上图所示）SCRIPT标签中声明的模板标记，然后从JavaScript使用。模板标记是那么势必用品等作为{{filterId}}和{{FILTERNAME}}。   下面的相关一块的JS从jQuery的 DOM操作帮助一个位的应用程序：车把表达式的值一个JAVASCRIPT对象

var templHtml = $("#filter-template").html(),
    template = Handlebars.compile(templHtml),
    filtersList = $("#filters-list");
 
var context = {
    filterName: filter.name,
    filterId: index
};
 
filtersList.append(template(context));

正如你可以从HTML标记，所有的滤镜预览框设有一个canvas标签，最终输出呈现在右边的大箱子。我们将进入更详细一点，后来在文章中以帆布技术是如何实现这些效果。

该应用程序还使用CSS3的@ font-face的字体呈现文本头和“添加”按钮。已采取的字体从优秀字体松鼠网站，这里是什么样的声明看起来像：

@font-face {
    font-family: 'TizaRegular';
    src: url('fonts/tiza/tiza-webfont.eot');
    src: url('fonts/tiza/tiza-webfont.eot?#iefix')
           format('embedded-opentype'),
         url('fonts/tiza/tiza-webfont.woff') format('woff'),
         url('fonts/tiza/tiza-webfont.ttf') format('truetype'),
         url('fonts/tiza/tiza-webfont.svg#TizaRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

该指令使用户代理的字体嵌入在页面中，并使其可指定font-family的规则，在这种情况下是“TizaRegular” 的名称下。在此之后，我们可以将这种字体怎么样我们通常做任何CSS font-family的规则。在InstaFuzz我使用以下规则分配字体头元素：

font-family: TizaRegular, Cambria, Cochin, Georgia, Times,
    "Times New Roman", serif;

您可能也已经注意到，有一个微妙的阴影被丢弃在页面上的容器元素。

这是可能使用CSS3盒阴影规则，这里是如何使用它在InstaFuzz。

-moz-box-shadow: 1px 0px 4px #000000, -1px -1px 4px #000000;
-webkit-box-shadow: 1px 0px 4px #000000, -1px -1px 4px #000000;
box-shadow: 1px 0px 4px #000000, -1px -1px 4px #000000;

这导致各地的相关元素，浏览器呈现了一层阴影。每个逗号分隔值部分指定阴影的以下属性：

1. 水平偏移
2. 垂直偏移
3. 传播距离 - 正值有软化的阴影效果
4. 阴影颜色

可以指定用逗号分隔的多个阴影值其实已经做了上面。请注意，我还指定了阴影供应商前缀语法使用Firefox和Chrome / Safari浏览器使用万盎司和WebKit的前缀。这会导致阴影继续工作在规则使用供应商的前缀版本支持此功能的浏览器的版本。需要注意的是W3C的版本规则的- 箱影子 -最后指定。这样做是故意的情况下确保该浏览器支持的形式，然后只W3C的行为实际上是应用到页面。

人们经常发现，Web开发人员要么不包括供应商前缀版本的CSS3规则对所有的浏览器支持规则和/或不包括W3C版本。开发商往往只是把规则，忽略了其他浏览器和W3C标准版本的webkit的版本。这就产生了两个问题- [1]用户体验不佳的用户正在使用非WebKit浏览器和[2]，它结束了在WebKit成为一个事实上的标准的网页。理想的情况下，我们希望W3C将推动未来的网络，而不是一个特定的浏览器实现。因此，这里有一些事情要记住，当玩的CSS功能的实验实现：

1. 使用供应商的前缀版本的CSS规则，通过各种手段，但要记住指定规则对所有支持的浏览器，而不仅仅是一个你碰巧测试页面（如果你使用Visual Studio中编辑CSS，那么你可能会对感兴趣千钧优异的Visual Studio扩展称为网络基础，使管理供应商的前缀一样简单的工作，因为它都不可能得到）。
2. 记住要指定W3C版本的规则。
3. 记住W3C版本的规则，使显示最后订购的发生。这是为了让客户端同时支持供应商前缀版本和W3C版本使用W3C指定的语义规则。

这是所有现在。在本系列的下一篇文章中，我们将看看如何应用程序支持文件的拖/放，如何使用文件API，过滤器本身的工作，以及我们如何防止冻结在UI线程通过委派核心数字运算工作网络工作者。

源问地址：http://www.sitepoint.com/how-to-build-an-instagram-like-photo-sharing-app-with-html5/

翻译博客：http://www.wangxionghui.com