3. 源码逻辑

开发流程

使用了webpack和gulp作为构建开发，如果您不懂这些是什么也没关系，只要安装好了依赖，然后做以下步骤就好了。

0. 通过npm安装好 gulp 和 webpack
1. 根目录下执行 gulp，接着去编辑 src/lrz.js 文件，每次保存文件，构建工具都会自动存储到 dist/目录下。
2. 编辑完毕后，再执行 gulp build，会自动合并压缩js文件到 dist/下，里面同时也是最终发布的文件。

目录说明

源代码在 src/ 里

lrz.js // 核心代码
lrz.all.js // 核心代码+依赖
lib // 依赖的文件
 - Promise.js  // 异步开发库
 - exif.js // 用于识别图片正确的旋转方向，然后调整
 - megapix-image.js  // 修复IOS7.12以下的BUG
 - jpeg_encoder_basic.js // 修复android4.5以下的BUG

源码逻辑

• 基本原理是通过canvas渲染图片，再通过 toDataURL 方法压缩保存为base64字符串（能够编译为jpg格式的图片）。
• 但由于兼容性的问题，坑很多，所以大部分代码是为了解决兼容性而已。

1. 收到传入的文件后，创建一个 canvas 对象 和 blob 对象（其实也就是对应的文件引用，所以能被 img src直接引用）

2. 创建 img 对象，标记允许跨域处理，src 设置为 blob，接下来就是开始压缩了。

3. 开始压缩，获取图片旋转的方向，计算用户设置的尺寸，设置canvas

• 发现是iOS低版本，异步载入iOS兼容文件，调整为正确方向，保存压缩，并返回 base64
• 其他情况，调整为正确方向 其他情况1：发现android低版本，异步载入android兼容文件，保存压缩，并返回 base64 其他情况2：保存压缩，并返回 base64

4. 尽可能释放内存