架构设计

选型： jquery.js 和 blueimp-canvas.js都是强大的页面库，功能上类似，jquery.js比较新中文文档也多一些。Exif.js提供了 JavaScript读取图像的原始数据的功能扩展，例如：拍照方向、相机设备型号、拍摄时间、ISO感光度、GPS 地理位置等数据。
要点：本项目使用的是分功能模块开发的方式，将菜单、左区域、语言、配置，都放在了不同的文件中，比如菜单是config-menu.js，语言是languages文件夹，类库是libs文件夹，各种模块放到modules文件夹，核心库放到了core里面，各种小工具放到了tools里面。如果同学们想深入了解各区域代码，可以定位到相应的文件夹下面查看。

代码结构

整个项目的代码分为三个部分，分别是css、js、html。入口文件是js文件夹中的main.js，入口页面文件是index.html。如图所示：

src-pic.jpg

首页介绍

首页将各种css、js文件引入，其中bundle.js是主渲染文件（使用npm打包命令打包后会生成bundle.js文件）。

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=edge" />
    <title>在线PS</title>
    <meta name="description" content="." />
    <meta name="keywords"
        content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0" />
    <link rel="icon" sizes="192x192" href="images/favicon.png">

    <!-- Google -->
    <meta itemprop="name" content="在线PS网页版" />
    <meta itemprop="description" content="在线PS网页版是使用HTML5的免费在线图片编辑器..." />
    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="在线PS网页版" />
    <meta name="twitter:description" content="在线PS网页版是使用HTML5的免费在线图片编辑器..." />
    <!-- Facebook, Pinterest -->
    <meta property="og:title" content="在线PS网页版" />
    <meta property="og:type" content="article" />
    <meta property="og:url" content="https://ps.gitapp.cn" />
    <meta property="og:description" content="在线PS网页版是使用HTML5的免费在线图片编辑器..." />
    <meta property="og:site_name" content="在线PS网页版" />

    <script src="dist/bundle.js"></script>