引入

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	图片地址

返回: 新的地址

示例

// 腾讯系图片域名才会被替换
getHttpsUrl('http://game.gtimg.cn/x.jpg');
// 'https://game.gtimg.cn/x.jpg'

getHttpsUrl('http://wx.qlogo.cn/x.png');
// 'https://wx.qlogo.cn/x.png'

// 非腾讯域名保持原样
getHttpsUrl('http://other.com/x.jpg');
// 'http://other.com/x.jpg'

// 本身就是 https 不会变
getHttpsUrl('https://game.gtimg.cn/x.jpg');
// 'https://game.gtimg.cn/x.jpg'

isSupportedWebp

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

参数：

返回: Promise.<boolean>

是否支持

示例

const checkWebp = isSupportedWebp();
const supported = await checkWebp();
if (supported) {
  console.log('当前浏览器支持 webp');
}

// 连续调用会复用上次检测结果（memo 缓存）
await checkWebp(); // 不会重复创建 Image

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	图片地址

返回: 新的地址

示例

// cos 域名会被替换为 cdn 加速域名
getCdnUrl('https://igame-10037599.cos.ap-shanghai.myqcloud.com/a.jpg');
// 'https://igame-10037599.file.myqcloud.com/a.jpg'

getCdnUrl('https://gamelife-1251917893.cos.ap-guangzhou.myqcloud.com/b.png');
// 'https://gamelife-1251917893.igcdn.cn/b.png'

// 非映射表中的域名保持原样
getCdnUrl('https://other.com/x.jpg');
// 'https://other.com/x.jpg'

// 空字符串
getCdnUrl(''); // ''

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])

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

- 将 http 转为 https - 替换为 CDN 域名 - 添加压缩和裁剪参数

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 + 压缩参数