帮助中心

您好,欢迎来到京东JSHOP帮助中心!
>

京东图片调用详解

人阅读
图片 图片降质 图片缩放 图片处理 2018-12-20 15:41:47

一、摘要

京东图片服务支持主站、移动端和印尼三种类型域名的访问;
其中商品提供了12种固定尺寸,以n+数字标识;用户上传的图片以pop为标识;
两种业务的图片都支持图片缩放(s+width+”x”+height+”_”)和图片处理;

一、可以使用的域名

1、主站

  • img10.360buyimg.com
  • img11.360buyimg.com
  • img12.360buyimg.com
  • img13.360buyimg.com
  • img14.360buyimg.com
  • img20.360buyimg.com
  • img30.360buyimg.com

2、移动端

  • m.360buyimg.com

3、印尼

  • img10.jd.id
  • img11.jd.id
  • img12.jd.id
  • img13.jd.id
  • img14.jd.id
  • img20.jd.id
  • img30.jd.id

二、商品业务

1、固定尺寸图片,共12种

n0(434-434)、n1(350-350)、n2(160-160)、n3(130-130)、n4(100-100)、n5(50-50)、n6(240-240)、n7(220-220)、n8(220-282)、n9(25-25)、n11(280-280)、n12(434-434),如:

//img13.360buyimg.com/n2/jfs/t5104/204/2609016796/138581/9c32e96b/591be74aN612a3e6b.jpg

2、活动系统获取商品图片标签

$!jshopCommon.getImage(imgName,size),其中imgName为图片返回地址,size为上述尺寸,如:

$!jshopCommon.getImage($!goods.imageurl,2)
  • 参考例子(PC版)://h5.jd.com/module/1/8.html
  • 参考例子(M版)://h5.jd.com/module/2/3.html

三、普通业务

test、pop等,如果不添加缩放参数和降质参数时,默认是访问上传到服务器的原图,如:

//img20.360buyimg.com/pop/jfs/t2362/199/2707005502/100242/616257ce/56e66b21N7b8c2be8.jpg

四、图片缩放

缩放参数语法:在业务名和图片文件地址之间加,s+width+”x”+height+”_”,如:

//img20.360buyimg.com/test/s100x100_jfs/t2362/199/2707005502/100242/616257ce/56e66b21N7b8c2be8.jpg
//img30.360buyimg.com/test/s720x540_jfs/t2362/199/2707005502/100242/616257ce/56e66b21N7b8c2be8.jpg

注意:webp格式图片不支持宽或高超过16383个像素的大图,若超过会自动等比缩小为16383x16383以内;
其他格式以宽或高最大不超过9999个像素;

五、图片处理

各种处理顺序依次为:根据exif自动旋转,画圆,裁剪,缩放,加白边,打水印,降质;
注意:每个url支持最多4个不同后处理同时有效;
目前经过图片系统处理后输出的图片的位深度都为24,若上传的原图的位深度比24小,有可能会出现经过裁剪、缩小和降质等处理后的图片反而比原图文件更大的情况。

1、居中裁剪

参数的语法:在原图url的后面加!cc_宽比例系数x高比例系数
示例:!cc_201x100,表示裁剪宽高比为201:100的结果图,不是结果图分辨率为201x100,后台处理中先裁剪再缩放,同时根据申请时的业务名选择是否设定增加白边。
若想将原图片裁剪为宽高比为2:1,缩放为300x200像素,示例:

//img20.360buyimg.com/test/s300x200_jfs/t2362/199/2707005502/100242/616257ce/56e66b21N7b8c2be8.jpg!cc_2x1

若缩放参数和裁剪参数宽高比不同,以裁剪宽高比为准进行等比缩放
若想得到指定宽高分辨率的结果图,可将裁剪与缩放宽高设成相同:

//img20.360buyimg.com/test/s300x200_jfs/t2362/199/2707005502/100242/616257ce/56e66b21N7b8c2be8.jpg!cc_300x200

裁剪任意矩形参数
参数的语法:在原图url的后面加!cr宽x高左上角点X坐标_左上角点Y坐标
示例:!cr_200x100_20_30,表示裁剪原图中矩形区域,区域左上角点横坐标20,纵坐标30,宽200像素,高100像素,坐标原点为图片的左上角点。后台处理中先裁剪再缩放,同时根据申请时的业务名选择是否设定增加白边。如:

//img20.360buyimg.com/test/jfs/t2362/199/2707005502/100242/616257ce/56e66b21N7b8c2be8.jpg!cr_200x100_20_30

若想将原图片裁剪为左上角在30,40,宽140像素,高100像素,并缩放为240x300像素,示例

//img20.360buyimg.com/test/s240x300_jfs/t2362/199/2707005502/100242/616257ce/56e66b21N7b8c2be8.jpg!cr_140x100_30_40

2、圆形图片

参数语法:在原图的后面加!c400代表是直径400的图片,!c200代表是访问直径200的图片

//img11.360buyimg.com/pop/jfs/t2362/199/2707005502/100242/616257ce/56e66b21N7b8c2be8.jpg!c400

3、图片降质

参数语法:在图片url的后面加!q10表示访问图片质量是10的图片。这个数字是(1-100)之间一或两位整数(!q100会报错405),仅支持原图为jpg和webp格式的图片

//img11.360buyimg.com/vc/jfs/t2362/199/2707005502/100242/616257ce/56e66b21N7b8c2be8.jpg!q10

更新:新版本增加了对webp的降质设置,使用方式与旧有jpg一样

4、转为webp格式

参数语法:在图片url的后面加.webp表示将该图片转换为webp格式图片。

//img11.360buyimg.com/vc/jfs/t2362/199/2707005502/100242/616257ce/56e66b21N7b8c2be8.jpg.webp

5、提取原始图片信息

参数语法:在图片url的后面加!imginfo表示提取上传的原始图片(忽略所有处理参数)基本信息,返回json串。

//img11.360buyimg.com/vc/jfs/t2362/199/2707005502/100242/616257ce/56e66b21N7b8c2be8.jpg!imginfo

六、注意事项

1、普通业务可以用n1-n12这样的业务名访问吗?

可以,但不推荐。n1-n12是商品图的业务,本身业务包含了图片压缩尺寸,以及加白边等自身业务功能。

2、图片系统支持的图片格式

jpg, jpeg, bmp, gif, png, webp。Gif图只能返回原图,不支持缩放降质等处理;

3、使用范围

存储在图片系统上的所有图片,只要知道其URL,就可以被访问,没有任何权限认证,且不支持删除操作。对于一些内容比较敏感或涉及到个人隐私信息的图片(例如身份证照片、护照等),不可存放在图片系统上,需要使用云存储进行存储。

分享到:
此文对你有用吗