图片模糊到清晰的展示方式

现在很多web应用在加载大图片时都有从模糊到清晰的加载效果，查看了一些资料，发现都是用了缩略图的形式来实现的。先做一张小的缩略图，在显示的时候先显示缩略图再拉伸到相应的位置，然后再用ajax加载大图片。

这样又会延伸出另外一个问题，缩略图比例如何设定，这个可以好好讨论一下。下面是其中的一种实现方法：

客户端上传到服务器端的图片已经在客户端做了一次处理，保证宽和高最大值不会超过960px，我们对图片做两种大小的缩略图，小的保证宽高不超过160px，中等缩略图保证宽高不超过640px；如果原图就小于160，则原图，小缩略图和中缩略图都是原图，如果图片范围在160到640之间，则原图和中缩略图是一致的，小缩略图要处理。

def scale(t,size=(50,50)):(w,h) = sizeif 'm' == t:limit = 640elif 's' == t:limit = 160if w >= h and w >= limit:scale = float(w) / limitelif h >= limit:scale = float(h) / limitelse:scale = 1return scale

t为标记是处理中等还是小缩略图的标记,size为原图的w,h为元组。返回scale是缩放比例，如果scale为1，则缩略图为原图，否则调用下面方法获取新的图片w,h

def resize(scale,size=(50,50)):(w,h) = sizeresize = (int(w / scale),int(h /scale))return resize

返回的resize是缩略图的宽高，如果是使用python的PIL库，直接image.resize(resize)就可以获取新的图片。

图片模糊到清晰的展示方式相关推荐

【web前端优化之图片模糊到清晰】看我QQ空间如何显示相片
此篇文章估计不会太长,有移除首页的风险,但是老夫(称老夫是因为我们真正的叶小钗其实都100多岁啦)是不会怕滴.所以,我来了哟! 题外话:今天我们一起还看了一道前端的面试题,而后我本来还想多找几道来做做 ...
H5 canvas画布字体图片模糊变清晰
H5 canvas画布字体图片模糊处理 <canvas id="canvas " width="386px" height="386px&qu ...
css设置背景图片模糊，文字清晰展示
css设置背景图片模糊,文字清晰展示使用filter: blur来实现,blur的值越大越模糊效果图: html: <div class="box"><p&g ...
Google 超分辨率技术 RAISR：模糊图片瞬间变清晰，运算速度快十倍
Google 超分辨率技术 RAISR:模糊图片瞬间变清晰,运算速度快十倍 Everyday the web is used to share and store millions of pictur ...
如何给图片降噪？图片噪点模糊变清晰的方法分享
我们日常出去旅游或者游玩,是肯定离不开拍照的,但是每个人的拍照技术都是不一样的,加上环境.设备等等因素,回家后看到照片也是满满的噪点不太清晰,拍摄的照片由于有这些噪点的存在,画质看起来就会比较模糊,那 ...
（前端）图片如何从模糊到清晰渐显
在写页面过程中,难免会遇到一些大图,即使压缩过后,依然加载速度缓慢.为了解决这个问题,我查找了一下资料: 发现有一种图片格式叫做交错式 Photoshop 保存PNG格式交错和不交错的差别: 1.PN ...
html实现图片淡化效果,图片由模糊变清晰的淡入效果 js+css实现【原创】
网页里,在一些例如栏目.标签.产品展示的地方,如果直接显示图片,会觉得有点平淡,如果图片加点由模糊变清晰.淡入淡出的效果,会大大的增强用户体验.本文将为你介绍一个js+css实现的方法,代码简单易懂, ...
前端加载大图片从模糊到清晰
打开天猫随便点了个链接,加载了一张大的背景图片,该图片从非常模糊到正常显示有一个过程,深入了解一下它的实现过程. 打开控制台,禁用Cache,模拟2G网络,刷新页面查看请求列表,浏览器先请求了一张缩 ...
实现图片加载从模糊到清晰显示的方法
1.通过代码控制 QQ相册最近做的一些优化方法解决了上诉两个方法的缺点和满足了用户查看照片的需求:第一时间看到照片大概情况和尽可能快的看到清晰的原图.该方法使用缩略图和原图同时加载并叠加显示,先加载缩 ...

图片模糊到清晰的展示方式

图片模糊到清晰的展示方式相关推荐

最新文章

热门文章