127 lines
3.5 KiB
JavaScript
127 lines
3.5 KiB
JavaScript
|
/**
|
|||
|
|
* 图片URL优化工具
|
|||
|
|
* 用于优化腾讯云COS图片的清晰度和质量
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 优化图片URL，添加腾讯云COS图片处理参数
|
|||
|
|
* @param {string} url - 原始图片URL
|
|||
|
|
* @param {Object} options - 优化选项
|
|||
|
|
* @param {number} options.quality - 图片质量 (1-100，默认90)
|
|||
|
|
* @param {number} options.maxWidth - 最大宽度（可选，用于列表显示）
|
|||
|
|
* @param {number} options.maxHeight - 最大高度（可选）
|
|||
|
|
* @param {boolean} options.useOriginal - 是否使用原图（不添加任何处理参数）
|
|||
|
|
* @returns {string} 优化后的图片URL
|
|||
|
|
*/
|
|||
|
|
function optimizeImageUrl(url, options = {}) {
|
|||
|
|
if (!url || typeof url !== 'string') {
|
|||
|
|
return url;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果是本地路径或data URI，直接返回
|
|||
|
|
if (url.startsWith('/') || url.startsWith('data:')) {
|
|||
|
|
return url;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果指定使用原图，直接返回
|
|||
|
|
if (options.useOriginal) {
|
|||
|
|
return url;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 检查是否是腾讯云COS的URL
|
|||
|
|
const isTencentCOS = url.includes('.cos.') || url.includes('.myqcloud.com');
|
|||
|
|
|
|||
|
|
if (!isTencentCOS) {
|
|||
|
|
// 非腾讯云COS的URL，直接返回
|
|||
|
|
return url;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果URL已经包含图片处理参数，先移除
|
|||
|
|
let baseUrl = url.split('?')[0];
|
|||
|
|
const existingParams = url.includes('?') ? url.split('?')[1] : '';
|
|||
|
|
|
|||
|
|
// 构建图片处理参数
|
|||
|
|
const params = [];
|
|||
|
|
|
|||
|
|
// 如果指定了最大宽度或高度，使用 imageView2
|
|||
|
|
if (options.maxWidth || options.maxHeight) {
|
|||
|
|
let imageViewParams = 'imageView2/0';
|
|||
|
|
if (options.maxWidth) {
|
|||
|
|
imageViewParams += `/w/${options.maxWidth}`;
|
|||
|
|
}
|
|||
|
|
if (options.maxHeight) {
|
|||
|
|
imageViewParams += `/h/${options.maxHeight}`;
|
|||
|
|
}
|
|||
|
|
params.push(imageViewParams);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 添加质量参数
|
|||
|
|
const quality = options.quality !== undefined ? options.quality : 90;
|
|||
|
|
if (quality < 100) {
|
|||
|
|
params.push(`imageMogr2/quality/${quality}`);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果有现有参数，合并处理
|
|||
|
|
if (existingParams) {
|
|||
|
|
// 如果已有图片处理参数，需要合并
|
|||
|
|
if (existingParams.includes('imageMogr2') || existingParams.includes('imageView2')) {
|
|||
|
|
// 保留原有参数，但优先使用新的质量设置
|
|||
|
|
const existingParts = existingParams.split('/');
|
|||
|
|
const newParams = params.join('/');
|
|||
|
|
return `${baseUrl}?${newParams}`;
|
|||
|
|
} else {
|
|||
|
|
// 其他参数，用&连接
|
|||
|
|
return `${baseUrl}?${params.join('/')}&${existingParams}`;
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 没有现有参数，直接添加
|
|||
|
|
return params.length > 0 ? `${baseUrl}?${params.join('/')}` : baseUrl;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取列表显示的图片URL（中等质量，限制宽度）
|
|||
|
|
* @param {string} url - 原始图片URL
|
|||
|
|
* @param {number} maxWidth - 最大宽度（默认750，适合列表显示）
|
|||
|
|
* @returns {string} 优化后的图片URL
|
|||
|
|
*/
|
|||
|
|
function getListImageUrl(url, maxWidth = 750) {
|
|||
|
|
return optimizeImageUrl(url, {
|
|||
|
|
quality: 85,
|
|||
|
|
maxWidth: maxWidth
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取预览/大图的图片URL（高质量）
|
|||
|
|
* @param {string} url - 原始图片URL
|
|||
|
|
* @returns {string} 优化后的图片URL
|
|||
|
|
*/
|
|||
|
|
function getPreviewImageUrl(url) {
|
|||
|
|
return optimizeImageUrl(url, {
|
|||
|
|
quality: 95,
|
|||
|
|
useOriginal: false // 仍然使用处理参数，但质量更高
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取原图URL（不添加任何处理参数）
|
|||
|
|
* @param {string} url - 原始图片URL
|
|||
|
|
* @returns {string} 原图URL
|
|||
|
|
*/
|
|||
|
|
function getOriginalImageUrl(url) {
|
|||
|
|
return optimizeImageUrl(url, {
|
|||
|
|
useOriginal: true
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
module.exports = {
|
|||
|
|
optimizeImageUrl,
|
|||
|
|
getListImageUrl,
|
|||
|
|
getPreviewImageUrl,
|
|||
|
|
getOriginalImageUrl
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
|
|||
|
|
|