引入

import {
  getHttpsUrl,
  isSupportedWebp,
  getCompressImgUrl,
  handleImgUnit,
  getCdnUrl,
  getCompressImgUrl,
  tinyImage
} from 't-comm';

// 不支持 tree-shaking 的项目
import {
  getHttpsUrl,
  isSupportedWebp,
  getCompressImgUrl,
  handleImgUnit,
  getCdnUrl,
  getCompressImgUrl,
  tinyImage
} from 't-comm/lib/image/index';

// 只支持 ESM 的项目
import {
  getHttpsUrl,
  isSupportedWebp,
  getCompressImgUrl,
  handleImgUnit,
  getCdnUrl,
  getCompressImgUrl,
  tinyImage
} from 't-comm/es/image/index';

getHttpsUrl

描述：

将图片地址由 http 替换为 https 协议

参数：

参数名	描述
url	图片地址

返回:

新的地址

isSupportedWebp

描述：

判断当前浏览器是否支持 webp

参数：

返回: Promise.<boolean>

是否支持

getCompressImgUrl(inUrl, [inImageWidth], [inImageHeight])

描述：

该函数用于处理腾讯云 COS 图片，实现按需加载和压缩。

• 自动将 http 转为 https
• 对腾讯云图片添加压缩参数
• 自动调整图片尺寸为 2 倍（避免图片模糊）
• 宽高按 10 取整（避免图片闪烁）

Docgen:
参数：

参数名	类型	默认值	描述
inUrl	string | object		图片原始 URL，或包含 url/width/height 的对象
[inImageWidth]	number	0	图片裁剪后的宽度（可选，默认为 0，表示不裁剪）
[inImageHeight]	number	0	图片裁剪后的高度（可选，默认为 0，表示不裁剪）

返回: string

返回处理后的图片 URL

示例

// 基础用法
const url = 'https://image-xxx.file.myqcloud.com/test.jpg';
const compressed = getCompressImgUrl(url, 100, 100);

// 使用对象参数
const compressed2 = getCompressImgUrl({
  url: 'https://image-xxx.file.myqcloud.com/test.jpg',
  width: 100,
  height: 100
});

handleImgUnit(size)

描述：

该函数用于处理图片尺寸，去除单位（px/rem）并转换为数字类型。

• 纯数字：直接返回
• px 单位：去除 'px' 后返回数字
• rem 单位：乘以根元素的 fontSize 转换为 px 值

Docgen:
参数：

参数名	类型	描述
size	number | string	输入的尺寸值

返回: number

返回处理后的数值（px）

示例

handleImgUnit(3);        // 3
handleImgUnit('10');     // 10
handleImgUnit('30px');   // 30

// 假设 document.documentElement.style.fontSize = '50px'
handleImgUnit('5rem');   // 250

// 假设 document.documentElement.style.fontSize = '10px'
handleImgUnit('5rem');   // 50

getCdnUrl(url)

描述：

获取 cdn 链接

参数：

参数名	类型	描述
url	string	图片地址

返回:

新的地址

getCompressImgUrl(inUrl, [inImageWidth], [inImageHeight])

描述：

该函数用于处理腾讯云 COS 图片，实现按需加载和压缩。

• 自动将 http 转为 https
• 对腾讯云图片添加压缩参数
• 自动调整图片尺寸为 2 倍（避免图片模糊）
• 宽高按 10 取整（避免图片闪烁）

Docgen:
参数：

参数名	类型	默认值	描述
inUrl	string | object		图片原始 URL，或包含 url/width/height 的对象
[inImageWidth]	number	0	图片裁剪后的宽度（可选，默认为 0，表示不裁剪）
[inImageHeight]	number	0	图片裁剪后的高度（可选，默认为 0，表示不裁剪）

返回: string

返回处理后的图片 URL

示例

// 基础用法
const url = 'https://image-xxx.file.myqcloud.com/test.jpg';
const compressed = getCompressImgUrl(url, 100, 100);

// 使用对象参数
const compressed2 = getCompressImgUrl({
  url: 'https://image-xxx.file.myqcloud.com/test.jpg',
  width: 100,
  height: 100
});

tinyImage(inUrl, [width], [height])

描述：

该函数是图片处理的综合方法，依次执行：

1. 将 http 转为 https
2. 替换为 CDN 域名
3. 添加压缩和裁剪参数

Docgen:
参数：

参数名	类型	默认值	描述
inUrl	string		图片原始 URL
[width]	number	0	图片裁剪后的宽度（可选，默认为 0，表示不裁剪）
[height]	number	0	图片裁剪后的高度（可选，默认为 0，表示不裁剪）

返回: string

返回处理后的图片 URL

示例

const url = 'http://igame-10037599.cos.ap-shanghai.myqcloud.com/test.jpg';
const optimized = tinyImage(url, 200, 200);
// 结果：https 域名 + CDN + 压缩参数