/** * 图片压缩参数配置 */ export interface ImageCompressOptions { /** 图片宽度(px),默认 300 */ width?: number; /** 图片质量 0-100,默认 90 */ quality?: number; /** 是否启用压缩,默认 true */ enabled?: boolean; } /** * 默认压缩参数 */ const DEFAULT_OPTIONS: Required = { width: 240, quality: 90, enabled: true }; /** * OSS 域名(文件上传接口同域) */ const OSS_BASE_URL = 'https://oss.wsdns.cn'; /** * 确保图片 URL 为完整路径 * * 后端可能返回相对路径(如 /uploads/xxx.jpg),需要补全 OSS 域名。 * * @param url 原始图片 URL * @returns 完整图片 URL */ export function ensureFullUrl(url: string): string { if (!url) return ''; if (url.startsWith('http://') || url.startsWith('https://')) { return url; } // 相对路径:补全 OSS 域名 return `${OSS_BASE_URL}${url.startsWith('/') ? '' : '/'}${url}`; } /** * 获取 OSS 压缩后的图片 URL * * 默认给图片 URL 拼接阿里云 OSS 图片处理参数,实现等比缩放 + 质量压缩。 * 使用场景:商品列表、商品卡片等缩略图展示。 * * 注意:预览原图时不需要调用此函数,直接用原始 URL 即可。 * * @param url 原始图片 URL * @param options 压缩选项 * @returns 处理后的图片 URL */ export function getCompressedImageUrl( url: string, options?: ImageCompressOptions ): string { // 先补全为完整 URL const fullUrl = ensureFullUrl(url); if (!fullUrl) return ''; const { width, quality, enabled } = { ...DEFAULT_OPTIONS, ...options }; // 未启用压缩,原样返回 if (!enabled) return fullUrl; // 已包含 OSS 处理参数,避免重复拼接 if (fullUrl.includes('x-oss-process')) return fullUrl; // 已有其他 query 参数用 & 拼接,否则用 ? const separator = fullUrl.includes('?') ? '&' : '?'; return `${fullUrl}${separator}x-oss-process=image/resize,w_${width}/quality,Q_${quality}`; }