注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

网易杭州 QA Team

务实 专注 分享 做有态度的QA

 
 
 
 
 

日志

 
 

我在网页端所遇到的图片类问题  

来自王紫琦   2016-09-06 13:51:32|  分类: 功能测试 |举报 |字号 订阅

  下载LOFTER 我的照片书  |
在网页端的测试期间呢,遇到了很多关于图片方面的坑儿。找了个晚上,仔细回顾了下,(⊙v⊙)嗯!决定赶紧将这些贡献出来,让以后测试图片展示和上传的同学可以少踩两脚~

一:Wap端 查看图片,怎么自动下载了个未知文件?
【重现】:Android 微信 通过浏览器查看用户上传的图片
【现象】:诶,为嘛没有打开图片,转而自动下载了一个未知的文件?
【原因】未指定Content-Type ,导致浏览器无法识别当前的图片。
【小知识】:Content-Type 报头字符串代表着服务器端发送给客户端浏览器的具体数据类型,浏览器将根据这个信息决定如何处理得到的数据内容。上传图片时,若不指定ContentType,浏览器会自动识别当前文件的ContentType,发送Http请求。
常用的做图软件导出图片,和Chrome浏览器能否识别的ContentType的关系,如下表所示:
PhotoShop导出格式
浏览器 默认识别
iCC色彩特性文件
无法识别
不带ICC
无法识别
CMYK色彩模式
无法识别
CMYK色彩模式
无法识别
Png减色压缩
ok
Web格式压缩
ok
Web格式压缩png
ok
基线不优化
无法识别
【经验借鉴】由于大部分由做图软件导出的图片浏览器都无法自动识别图片类型,成功显示图片有两种解决办法:
1、上传图片时,通过文件的后缀名,指定ContentType;
2、自定义页面显示图片,不使用浏览器默认的查看方式(更建议此类方法,还可解决部分上传图片ContentType丢失的问题);

二:预览个大图,还要翻转手机看
【现象】:Woc,为啥预览的小图是竖着的,点开看变成横着的了?
【原因】用户通过Wap页面上传图片的时候,会有拍照上传的需求和行为。
手机拍出的照片可能会带有旋转信息,若不对此类图片进行处理,或者仅对一部分图片进行处理,则会造成图片显示不一致的现象。
【经验借鉴】后台在上传图片后,统一去掉旋转信息。同时要注意是否对一部分横图或竖图有翻转的需求。

三:CMYK 错失 IE8
【现象】:CMYK格式图片在IE8上显示为叉叉。
我在网页端所遇到的图片类问题 - 网易杭州QA - 网易杭州 QA Team
 
【重现】:用户上传的图片,可能通过图片处理软件,由RGB格式变成了CMYK格式的图片。
【经验借鉴】在图片上传后,后台将CMYK格式的图片,转换成RGB格式的图片。

四:给脚本穿个jpg的外衣
【现象】:后台发现了错误图片的上传
我在网页端所遇到的图片类问题 - 网易杭州QA - 网易杭州 QA Team
 【原因】部分用户在上传图片的时候,将原有的不符合标准的图片,通过修改后缀名的方式,简单通过第一步前端审核。将图片返回给后端,后端请求不符合条件进而引发的问题。
【经验借鉴】单纯通过后缀名判断上传文件的类型肯定是不安全的,采取mime类型判断或读取文件头字节等转换方式,通过此类方式,还可避免图片木马。

五:事实证明图片还是要限制身高
【起因】
:不要限制图片的高度啦,让用户随意上传!!————来自需求方
【现象】
:当美工,哦不,是
射击狮做个1.4w高度的图片!然后。。。。查看的时候返回了500。
我在网页端所遇到的图片类问题 - 网易杭州QA - 网易杭州 QA Team
 
【原因分析】:在图片限制大小+新浪微博长图的风靡+条漫的存在前提下,对上传图片的宽高未做过多限制。在项目利用了其他图片处理后台的情况下,应注意兼容其他平台的限制情况。在实际操作进行过程中,出现上传高度超过NOS最高限制的图片,提示“上传失败”,但实际上传成功,且同时创建了多个对象。
【经验借鉴】后台对创建对象做限制外,也应当注意图片处理的最高高度和宽度。

六:查看A的大图的时候,竟然显示了B的大图
【现象】:好像查看森系鹿娘的大图阿!!!诶!点开为什么是美人鱼版的?
我在网页端所遇到的图片类问题 - 网易杭州QA - 网易杭州 QA Team
【重现】:在同一作者上传图片的页面点击了浏览器的返回按钮,重新进入了上一次成功上传的页面,再次上传成功
【原因分析】:由于NOS特有需求是,相同Key上传图片,新图片会替换掉之前的图片。在无法清除浏览器缓存的情况下,点击回退按钮,重新提交作品,会出现旧图片被修改的问题哦。
【经验借鉴】每一次上传图片的时候都会重新从后台获取一个key,然后用这个key上传。

七:Wap页 上传图片慢的是不是卡住了?
【现象】:Wap页面 上传图片速度炒鸡慢,什么?你拍的照片是10M的?那按照正常Wap页面 20kb/s的速度上传,让我算算要多久。。。。
【经验借鉴】交互上要限制上传图片过程中的大小,同时开发哥哥们针对于不同需求情况做不同的应对处理。

八:哎呀呀,好好的美图怎么变成花图啦!
【原因分析】:png格式,同时背景透明图片,被射击狮们修改的痕迹全都暴露啦!
【解决办法】:开发哥哥们快给png格式的图片默认添加白色的背景。
我在网页端所遇到的图片类问题 - 网易杭州QA - 网易杭州 QA Team
 

九:诶,同是Chrome,你的图片显示怎么跟我的图片显示不一样?
【现象】数据丢失,导致图片显示不一致
【原因分析】:在图片传输过程中由于数据丢失,导致图片的颜色显示不一致。
解决办法】:这个问题?可以接受,赶快上线吧!!!————来自某需求方的呼唤
评估起来这个问题确实不算严重,对图像要求稍稍低点的网站都可以接受。So,忙成Dog的开发哥哥姐姐们暂未处理。
这个问题如果后面解决啦,会更新博文哒~~当然如果你也曾遇到过这个问题,并解决啦,欢迎联系我哦~~

我在网页端所遇到的图片类问题 - 网易杭州QA - 网易杭州 QA Team
 
PS:大家如果有踩过其他坑,欢迎在下方留言~~

 

    



  评论这张
 
阅读(237)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016