挪动端图片上传踩坑纪录(包含 平移 缩放 扭转 裁切)

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…

    原文作者:幸运儿
    原文地址: https://segmentfault.com/a/1190000009621517
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞