移动端图片上传踩坑记录（包括 平移 缩放 旋转 裁切）

摘要：上传图片顺时针旋转度问题使用获取图片当前拍摄角度修正后展示裁切位置不正确或需要减去的差值问题描述当目标元素的上级元素中有使用时，用如上的方法都会导致计算错误，这一在常用框架，类库中都存在。应该是和在实现上的差异造成了。

bug1.ios 上传图片 顺时针旋转90度问题

solution1.使用exif.js获取图片当前拍摄角度 修正后展示

http://www.mamicode.com/info-...
http://blog.csdn.net/linlzk/a...

bug2.裁切位置不正确

solution2.offsetLeft或offsetTop需要减去translate的差值

http://tgideas.qq.com/webplat...
问题描述：
当目标元素的上级元素中有使用transform:translate(x,y)时，用如上的方法都会导致offset计算错误，这一bug在常用canvas框架EaseJS、QuarkJS，DOM类库Zepto中都存在。我项目中使用的是QuarkJS，碰到具体问题是舞台事件坐标不正确，由于是框架中的bug，足足花了半天时间才追查到。

bug3.ios 裁切图片为空白

参考下面吧

https://www.zhihu.com/questio...
测试后发现，可能原因是iOS拍摄的图片尺寸过大后会出现此bug，但与图像大小无关（导出原图，jpeg压缩后，只有几百KB，还是会有bug；但是质量不变，尺寸调小后可以），将canvas等比绘图，不调尺寸比例后，iOS上加载图片是白色，安卓没问题。iPhone5、5C、5S均有此bug
解决方案（已验证）：使用ios-imagefile-megapixel ，将大图拆分为一块块的小图读取到小canvas再拼起来(还可以设置图片旋转)
https://segmentfault.com/q/10...
pad上你应该是拿Safari打开的吧，我电脑上Safari打开也看不到图片。应该是Safari和Chrome在实现drawImage上的差异造成了。
当使用7个参数的时候，第2，3，4，5参数联合起来表示对图像的剪裁区域。我测试下来的结果是，如果这个区域超出了图像原来的大小区域，则safari下不绘制，而chrome下会将超出的区域绘制成透明。
你这张图的原始大小（img,natureWidth, img,naturalHeight）是200*200，而期望绘制的是320-0, 300-0，超出其范围。设为200，200应该就可以了。
http://stackoverflow.com/ques...

canvas画布在主流浏览器中的尺寸限制
http://www.cnblogs.com/shucho...
在IOS10下，自带浏览器和微信下，超过40964096像素则显示不了红色方块；HUAWEI NXT-TL00手机自带浏览器和UC浏览器下，不能超过81928192像素；在PC,CHROME浏览器，360浏览器，不能超过1638416384像素；搜狗浏览器，要比1638416384稍微小一些；firefox,最大数在11164*11164左右；IE11、EDGE浏览器，没找到极限，只不过越大电脑越慢内存消耗严重；

bug4.ios图片的大于2MB时 上传图片被压瘪

solution4.重置图片的比例

https://github.com/CommanderX...
http://blog.csdn.net/linxijun...