艺灵设计

全部文章
×

装逼技能之通过小图获取各尺寸图片教程

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2016-04-28 22:23:18 - 阅: - 评:1 - 积分:0

摘要:
  不管看官是什么岗位,学一招装逼技能日后必能装上一把!此技能攻击人群为美工,妹子哟~.....

一、起因

前几天,公司美工@明媚找我帮一个忙。原来是:让我通过一张小图链接获取到大图

这对我来说,秒秒钟就搞定的事情。当然了,对于没有经验的看官来说,他们永远不能想通:怎么能通过小图获取到大图

为了让更多的看官快速学会这一装逼技能,艺灵特写一篇教程。此教程可适用于各大网站:淘宝、折800、卷皮、京东等等。教程会以多个案例进行详细解说,小白可进,已会的自便。

二、如何获取图片地址

虽然这个问题很小白化,但为了后面能进行愉快的玩耍,此处还是要讲一下的。

以淘宝详情页为例,鼠标放到任一图片上---右键--复制图片网址即可。配图:复制图片地址步骤

已学会的看官可以进行下面的教程了,没有看官的不要往下看 !

三、案例一:淘宝

之前也有一些看官咨询大图的事情,这里统一回复一下。

首先我们拿详情页主图下面的缩略图来说,示例缩略图地址:
https://gd1.alicdn.com/bao/uploaded/i1/759415648/TB2fkdxnpXXXXcsXpXXXXXXXXXX_!!759415648.png_50x50.jpg然后我们再放缩略图对应的主图地址:
https://gd1.alicdn.com/bao/uploaded/i1/759415648/TB2fkdxnpXXXXcsXpXXXXXXXXXX_!!759415648.png_400x400.jpg

3.1、对比网址,发现不同!

我们在对比后会发现两个链接有相同部分也有不同部分。相同的成份比较多,不同的地方是:50x50400x400

3.2、问题:两处不同表示什么意思呢

我们先来看下详情页中主图与缩略图的尺寸规格吧,配图:淘宝详情页缩略图与主图尺寸从图中我们可以看到,缩略图的规格是:50x50,“主”图规格是:400x400

此时,看官有没有一丁点领悟???

如果没有,我们继续往下讲。

3.3、常见图片后缀名

艺灵相信看此文章的看官对图片后缀名或多或少有一点了解,至少能说出一至两种吧。

常见图片后缀名有以下几种:.jpg.png.gif.wbm

图片有了后缀名后,我们可以用看图软件或直接通过url访问线上图片。上面的两张图片链接的相同部分中均出现了.png,但在紧跟其后的不同部分中又出现了.jpg,这说明了什么?

这说明我们的相同部分本身就是一张图片!并且是我们上传的原图!加后缀只是淘宝对图片进行了智能处理而已。

3.4、淘宝为什么要这样做

艺灵知道肯定会有看官这样问,好吧,我们来举个例子。

还拿刚才的例子来讲,上面的例子中出现了缩略图主图,其实还有中图等若干尺寸。如果我们按照正常的思路来解决问题,此时要在ps中处理三种以上不同尺寸的图。一个宝贝通常会有几张主图,一个店铺有若干个宝贝,一个公司会有多个店铺,这是一个什么概念!!!

看官现在能懂淘宝为什么要智能处理了吗?说白了,就是帮你减轻工作量!上面案例的原图地址:https://gd1.alicdn.com/bao/uploaded/i1/759415648/TB2fkdxnpXXXXcsXpXXXXXXXXXX_!!759415648.png

再来个折800的案例。

四、案例二:折800

折800上某一商品详情页缩略图地址:http://z2.tuanimg.com/imagev2/trade/800x800.c9317429adba89220cc6fc89430c00b4.58x58.jpg,看官现在能告诉艺灵原图链接了吗?如果不能,请往下看。

上面缩略图对应的主图地址是:http://z2.tuanimg.com/imagev2/trade/800x800.c9317429adba89220cc6fc89430c00b4.400x.jpg,同样是找差异。

在经过对比后,我们会发现仍然是最后面一小段有差异,分别是:58x58400x

此处跟案例一的淘宝有一点区别,前面相同部分中并未出现一个完整的图片后缀名,此时我们又该如何获取在图链接呢?

4.1、万变不离其宗!

58x58表示尺寸是58400x表示尺寸是400。我们之前说过,淘宝会对我们的原图进行智能处理,此处折800也干过这事!我们删除掉不同部分即可得到大图!大图地址:http://z2.tuanimg.com/imagev2/trade/800x800.c9317429adba89220cc6fc89430c00b4.jpg

至此,已经完整讲述了两个不同的案例,看官会了吗?

不会?继续往下看另一个不同案例!

五、案例三:卷皮

某一商品缩略图地址:http://s2.juancdn.com/bao/160426/9/7/571ec29c92be59a5598b457c_800x800.jpg?iopcmd=thumbnail&type=8&width=400&height=400%7Ciopcmd=convert&Q=88&dst=jpg不知道原图地址是多少的往下看。

缩略图对应的主图地址:http://s2.juancdn.com/bao/160426/9/7/571ec29c92be59a5598b457c_800x800.jpg?iopcmd=thumbnail&type=8&width=58&height=58%7Ciopcmd=convert&Q=88&dst=jpg

经过对比我们会发现相同部分和不同部分,并且非常明显!所以,原图地址:http://s2.juancdn.com/bao/160426/9/7/571ec29c92be59a5598b457c_800x800.jpg

如果看官尝试修改上面的width=height=后面的数值会发现很有意思的事情。

已经讲了三个案例了,还有不会的看官吗?如果有,请往下看。

六、案例四:京东

个人对京东很失望,除了店铺里面暂时还未像淘宝那样关闭自定义css权限外,其它的什么功能都不能与淘宝比。比如:轮播,超垃圾,不能设置成不自动播放,循环功能也没有,并且提供的效果也非常少,像淘宝的弹性等一样都没有!
上传图片功能,也很垃圾,传完了找图都不好找,而且经常图裂!
后台发布功能,无比坑爹!15s的延迟!每发布一次要等待15s,呵呵......
......

虽然京东很多地方都不好,但至少在css上面学乖了,估计是故意抢淘宝生意的,说不定在某天,当其非常强大的时候,也会像淘宝那样推出付费才能使用css的服务......

好了,还是来看案例吧。

某产品缩略图地址:http://img13.360buyimg.com/n5/jfs/t2608/152/79455568/203626/d84c9ca1/56ff6ac7Ne38a8e64.jpg,请问:原图地址是多少。

哈哈,懵逼了吧!.jpg只出现了一次,这下如何是好?

但是!别忘记了,我们还有主图可供参考!

主图地址:http://img13.360buyimg.com/n1/jfs/t2608/152/79455568/203626/d84c9ca1/56ff6ac7Ne38a8e64.jpg

哎哟,主图竟然也没有多余的后缀,这可怎么办???

6.1、没有多余的后缀就没有办法了吗?

我们还是来对比下链接吧,很多看官乍一眼看上去会说链接相同,其实不同!变化非常小。变化之处:/n5/

上面黄色高亮部分就是变化之处,京东的各规格缩略图并不像其它网站那样出现数字x数字width=等明显形式进行处理。我们修改黄色部分可得到各种图片,所以原图地址是:http://img13.360buyimg.com/n0/jfs/t2608/152/79455568/203626/d84c9ca1/56ff6ac7Ne38a8e64.jpg

四个案例全部讲完,看官会了吗?如果不会,请看最后一个临时加餐案例。

七、案例五:destoon管理系统

公司使用的是destoon b2b管理系统,该系统也自带了处理图片规格的功能。下来面讲一个小案例。

缩略图地址:http://www.wowobao.com/file/upload/201512/17/175749211.jpg.thumb.jpg,相信看完们都能很快说出原图地址了吧。

原图地址:http://www.wowobao.com/file/upload/201512/17/175749211.jpg

恭喜看官!经过5个案例的练习,终于练成此装逼技能!

八、总结

以上案例并非适用于各网站,毕竟很多网站对图片处理上并非有一套可寻的机制。一些小网站不会去在乎用那么多不同规格的图片,因为毕竟不是需求。但对于购物类网站,此技能还是适用的。

----------完----------

转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:http://www.yilingsj.com/code/2016-04-28/390.html

若亲不想直保留地址,含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载,随便修改,但请尊重艺灵的劳动成果!谢谢理解。

亲,扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助,您可以用支付宝打赏下艺灵哦!

Tag: 缩略图 主图尺寸 淘宝店铺装修 技能提升 装修教程 教程分享

上一篇: 科普知识之淘宝店铺装修中的那些伪模块骗过了99%的人,不服来战!   下一篇: 干货分享之如何让淘宝手机端详情显示高清图片

评论区