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

Richard_Gao 发布于2019-08-20 16:57 / 2401人阅读

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

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

超融合服务器云服务器 H5移动端上传图片 php图片上传裁切 html 移动端缩放上传图片旋转

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83276.html

匠心打造canvas签名组件

摘要：原文匠心打造签名组件导读月又是项目吃紧的时候，一大波需求袭来，猝不及防。可以先戳这里体验把后面将要提到的签名组件。剩下的也是绑定事件中关键的一步。设置完成了上述功能，一个签名插件就已经成型了。本文首发于CSDN网站，下面的版本又经过进一步的修订。原文：匠心打造canvas签名组件导读 6月又是项目吃紧的时候，一大波需求袭来，猝不及防。度过了漫长而煎熬的6月，是时候总结一波。最近移...

MAX_zuo 2019-08-20 17:53 评论0 收藏0
GPU 渲染管线与着色器大白话总结 ---- 一篇就够

摘要：它的处理单位是顶点，也就是每个顶点，都会调用一次顶点着色器。这里给一个的代码，把顶点着色器和片元着色器的代码，放到了一个文件中，不过引擎会解析文件，转换个着色器代码段，传递给。通常，顶点着色器只处理顶点坐标，进行空间转换。 ...

roadtogeek 2021-10-13 09:40 评论0 收藏0
iOS - 收藏集 - 掘金

摘要：动画系列之五基础动画之缩放篇旋转篇掘金这一篇主要介绍基础动画之缩放和旋转。本文主要会基于一些开源代码和个人实践，对功能性和实用性均佳，应用领域广泛的幻灯片播放库掘金的多选掘金好久 PPAsyncDrawingKit - 实现了一系列基础 UI 控件的轻量级 ASDK - iOS - 掘金一年 iOS，求职中，上海地区，邮箱：dskcpp@gmail.com PPAsyncDrawing...

dingda 2019-06-25 16:13 评论0 收藏0
opencv-python 详解图像的几何变换缩放、平移、旋转、翻转

摘要：矩阵中的是向和方向平移的距离，举个例子，如果是向右平移个像素，向下平移个像素的话，那么变换矩阵平移是用仿射变换函数实现的参数含义输入图像。效果旋转旋转同平移一样，也是用仿射变换实现的，因此也需要定义一个变换矩阵。目录缩放平移旋转翻转：我们经常会用到图像的缩放...

gecko23 2021-09-03 10:29 评论0 收藏0
2D骨骼动画工具DragonBones的使用教程

摘要：插槽插槽是骨骼动画中显示图片的容器，隶属于骨骼。正向动力学和反向动力学在骨骼动画中，一般来讲，子骨骼的运动会受到父骨骼的影响，例如大臂旋转，小臂也会跟随旋转，这叫作正向动力学，也就是父亲影响孩子。怎样用更少的美术成本创造出更生动的动画效果？今天就为大家介绍一套开源的2D骨骼动画框架和工具——DragonBones，它包含了桌面骨骼动画制作工具DragonBonesPro和一套多语言版...

heartFollower 2019-08-05 15:10 评论0 收藏0