[javascript] <完全开源,开心分享> HTML5 Canvas 在线图片处理《imageMagic》(single page app)开发详解[1]

web App基本信息

 

先介绍一些基本信息,后面我会对架构设计进行剖析,敬请关注(不定期更新)。

 

在线演示地址:http://www.sinreweb.com/im/ 

源码github地址:https://github.com/Neverland/imageMagic

 

  该项目是一个真正意义上的web 应用软件,为国内某大型互联网图库的在线编辑工具。项目的初衷为了使编辑日常处理图片的需求可以在浏览器中完成,避免小改动也使用笨重的ps。一方面ps的学习成本也很高,有一个简单使用的在浏览器中运行纪图像处理工具,降低新编辑的学习成本。

  开发这个项目公司一方面也可以做技术储备,对新浏览器新技术有一定认知和探索。由于是一个探索型项目所以开发自由度比较高,有时间去设计和探索,所以没有使用任何类库完全原生javascript。为了增强app的生命力,兼容了几乎所有主流支持canvas的浏览器其中包括IE9和ios4的浏览器(需要使用沾贴网络图片的方式,服务器代理为本域名的方式,canvas有同域限制)。 

  项目启动时还是2011年9月份当时主流FF3,app以Firefox为主流平台开发,读图还是使用浏览器私有方式。当时并不跨浏览器,从FF7支持File API。进行了代码升级于css升级,该app终于实现了跨浏览器。

  到2011年低,该项目一期结束,2012年8月份我有为他添加了滤镜组件。后面基本没有更新了。

特点:

  1.为了使其跟容易维护,该app采用一个顶级命名空间imageMagic,只会产生一个全局变量。

  2.采用桌面软件开发思路,有config.js文件通过配置该文件可以适用多产品线的个性需求。

  3.有一个入口文件,init.js通过配置该文件可以使软件功能启动禁用轻松实现。

  3.为了便于升级维护,采用了模块模式开发。支持热插拔。

  

只有一个全局变量所产生的命名空间:

  

 

 

软件设计图 

Structure

 

 

posted @ 2012-11-08 21:25  小玉西瓜  阅读(3164)  评论(2编辑  收藏  举报