［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