［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

转载于:https://www.cnblogs.com/enix/archive/2012/11/08/2761115.html

［javascript］完全开源，开心分享 HTML5 Canvas 在线图片处理《imageMagic》（single page app）开发详解［1］...相关推荐

html5 canvas 在线图片转换器
前天写完文件上传的时候,老板给了个任务,问我能不能把图片压缩后再上传,并且保证前面的功能能正常使用.虽然最后放弃了这个想法,但我在查资料的过程中看到了canvas的toDataURL这个功能.于是就想 ...
图片涂鸦html插件,HTML5 canvas 在线涂鸦
插件地址采用技术 jq-signature.min.js Developed using jQuery 2.1.4. Insert title here $(function(){ $('.js-s ...
html5走格子游戏,JS/HTML5游戏常用算法之碰撞检测地图格子算法实例详解
JS/HTML5游戏常用算法之碰撞检测地图格子算法实例详解发布时间:2020-09-26 20:42:24 来源:脚本之家阅读:112 作者:krapnik 本文实例讲述了JS/HTML5游戏常 ...
HTML5 canvas 在线画笔绘图工具（一）
HTML5 canvas 在线画笔绘图工具(一) 功能介绍这是我用Javascript写的第一个程序,在写的过程中走了很多弯路,所以写完之后想分享出来,给与我一样的初学者做为学习的参考,同时在 ...
《HTML5 canvas开发详解（第2版）》——1.9　HTML5 Canvas对象
本节书摘来自异步社区<HTML5 canvas开发详解(第2版)>一书中的第1章,第1.9节,作者: [美]Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社 ...
HTML5 canvas 在线画笔绘图工具（三）
组装画板(TDrawBuilder) 在这一小节中我们要把工具条和画板组装起来,让他们可以协同进行工作. 画板通过一个命名为TDrawBuilder来进行组装.在详细讲解TDrawBuilder对象之 ...
EasyPR中文开源车牌识别系统开发详解
在上篇文档中作者已经简单的介绍了EasyPR,现在在本文档中详细的介绍EasyPR的开发过程. 正如淘宝诞生于一个购买来的LAMP系统,EasyPR也有它诞生的原型,起源于CSDN的taotao ...
Java开源生鲜电商平台-Java分布式以及负载均衡架构与设计详解(源码可下载）
Java开源生鲜电商平台-Java分布式以及负载均衡架构与设计详解(源码可下载) 说明:主要是针对一些中大型的项目需要进行分布式以及负载均衡的架构提一些思路与建议. 面对大量用户访问.高并发请求,海量 ...
《Web前端开发精品课——HTML5 Canvas开发详解》——第一部分第二章节
本节书摘来自异步社区<Web前端开发精品课--HTML5 Canvas开发详解>一书中的第1部分,第2章,作者:莫振杰著,更多章节内容可以访问云栖社区"异步社区"公众 ...
html5 canvas基础与动画开发详解-吴华-专题视频课程
html5 canvas基础与动画开发详解-533人已学习课程介绍一.本课程几乎包括所有canvas常用的api用法讲解二.包括以下案例应用: 1.坐标系绘制 2.图片裁剪与填充 ...

［javascript］完全开源，开心分享 HTML5 Canvas 在线图片处理《imageMagic》（single page app）开发详解［1］...

［javascript］完全开源，开心分享 HTML5 Canvas 在线图片处理《imageMagic》（single page app）开发详解［1］...相关推荐

最新文章

热门文章

［javascript］ 完全开源，开心分享 HTML5 Canvas 在线图片处理《imageMagic》（single page app）开发详解［1］...

［javascript］ 完全开源，开心分享 HTML5 Canvas 在线图片处理《imageMagic》（single page app）开发详解［1］...相关推荐

最新文章

热门文章

［javascript］完全开源，开心分享 HTML5 Canvas 在线图片处理《imageMagic》（single page app）开发详解［1］...

［javascript］完全开源，开心分享 HTML5 Canvas 在线图片处理《imageMagic》（single page app）开发详解［1］...相关推荐