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

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 裁切图片为空白

1. 参考下面吧

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...