[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
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步