@ezbuy/smartimagesrc

SmartImageSrc

指定图片规格对Ezbuy，兰亭，天猫淘宝，京东图片进行优化/瘦身处理。

应用场景：

• Ezbuy 平台

  支持如下域名的图片优化处理, 根据七牛CDN规则，自动追加优化参数。

  • i.ezbuy.sg
  • i2.ezbuy.sg
  • 7xiata.com1.z0.glb.clouddn.com
  • 7xiuv9.com5.z0.glb.clouddn.com
  • HASH值 Fu2nmas1BuRAx8mz5n56aAGN9JwK

  优化示例： //i.ezbuy.sg/Fu2nmas1BuRAx8mz5n56aAGN9JwK?imageView2/2/w/100/h/100/q/90/format/webp

• 天猫淘宝系

  支持对如下域名识别，根据淘宝天猫的CDN规则，追加优化参数。

  • taobaocdn.com
  • alicdn.com

  优化示例： https://gd1.alicdn.com/bao/uploaded/i1/50983440/TB2kRy_dFXXXXcXXXXXXXXXXXXX_!!50983440.jpg_400x400_.webp

• 兰亭系

  识别 *.rightinthebox.com，根据兰亭CDN规则，追加优化参数, 如：

  • mi0.rightinthebox.com
  • li0.rightinthebox.com

  优化示例： https://li0.rightinthebox.com/images/200x200/cateimg/201911/acb9ce6b4fbb9462e16259f819e38973.jpg?v=1&fmt=webp

• 京东系

  识别域名：360buyimg.com，根据京东CDN规则，追加优化参数。

  优化示例 http://m.360buyimg.com/mobilecms/s60x60_jfs/t1/51767/14/10030/115649/5d71bdf0Ea09f4987/c13b99ad0e1249f9.jpg!q80.webp

安装

yarn add @ezbuy/smartimagesrc

API

makeImageUrls(originSrc, params)

• originSrc: string 原图地址

• params: ImageProps

  • params.online

    boolean
    默认 false
    是否UAT环境，仅对Ezbuy有效。地址不同则生成的七牛CDN域名不同。

  • params.qnParam

    object
    默认 {}
    参考 https://developer.qiniu.com/dora/api/1279/basic-processing-images-imageview2

  • params.qnParam.w

  number 指定图片宽 实际指定 params.keepSize， 实际宽为 params.qnParam.h * 设备像素比 - params.qnParam.h number 指定图片高
  若不指定 params.keepSize， 实际高为 params.qnParam.h * 设备像素比

  • params.qnParam.imageslim

  图片瘦身
  参考 https://developer.qiniu.com/dora/api/1271/image-thin-body-imageslim

  • params.qnParam.q

  number 图片质量 默认90

  • params.qnParam.format

  指定图片格式，不传入则 自动识别。浏览器支持webp则优先处理为webp

  • params.qnParam.interlace

  "1" | "0" 是否需要支持渐隐模式

  • params.keepSize

  boolean 是否保持传入的宽高, 默认 false

  • params.aliSize

  number
  {aliSize: 1} 等同 {qnParam: {w: 100, h: 100}}
  {aliSize: 2} 等同 {qnParam: {w: 200, h: 200}} 以此类推
  此参数仅对淘宝阿里系图片处理有效

• 返回

  string[]
  经过处理之后的地址列表,具体规则为
  带规格的WEBP > 不带规格的WEBP > 带规格的jpg > 不带规格的jpg > 原图

示例

import { makeImageUrls, ImageProps } from "SmartImageSrc";

const params: ImageProps = {
    online: true,
    qnParams: {
        w: 100,
        h: 100
    }
};

const originSrc: string = "...";

const urls = makeImageUrls(originSrc, params);