Sublime Text
Chrome浏览器调试
这一块主要在前面功能上增加了两点修改： 1.增加隐藏画布（offCanvas），用于绘制上传的相片； 2.引入exif.js，用于获取相片的方向值。
声明变量和初始化数据，详细代码如下图，该部分是基于前面功能声明修改了红色框的数据，变量的作用都已经做了详细备注，可自行查看代码。
压缩上传相片的功能实现，简单说就是先把上传相片绘制到隐藏画布中（设小画布尺寸），然后把该画布转化为图片重新绘制到操作画布，从而实现压缩；详细分析如下： 先设置最大宽度（maxWidth）或最大高度（maxHeight）（该值会影响上传相片的压缩比例，越大越清晰，所以要选择一个既清晰又不会太大的值（建议800-1000），这里为了演示设置了230），如果相片宽高都小于设置的值，则保持原值，如果大于设置的值，就根据下面代码计算（等比例缩小）； 然后把上传相片绘制到该画布上（offCtx.drawImage(offImgObject, 0, 0, offCanvas.width, offCanvas.height)）； 最后把该画布转化为图片（fileSrc = offCanvas.toDataURL('image/jpeg')），并传值给操作画布（drawImageToCanvas(initDistance, fileSrc, filters, scaleValue, rotateValue)）。 Tips：由于绘制到操作画布的图片已经压缩过，所以操作滤镜不用使用定时器，修改如图2。
上传相片摆正的功能实现，简单说就是先获取上传相片的方向值，然后根据数值判断旋转的弧度，最后对操作画布作相应的旋转，从而实现相片的摆正；详细分析如下： 先执行函数selectFileImage(files)获取相片的方向值（orientation--图1、2）； 然后根据方向值的不同计算出不同的旋转弧度（sAngle--图3）； 最后操作画布旋转相应的弧度（ctx.rotate(rotateValue + sAngle)）。