147 lines
4.4 KiB
JavaScript
147 lines
4.4 KiB
JavaScript
|
|
/**
|
|||
|
|
* 图片处理工具
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
// 默认头像(base64编码的SVG)
|
|||
|
|
const DEFAULT_AVATAR = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI2U1ZTVlNSIvPjxjaXJjbGUgY3g9IjEwMCIgY3k9IjgwIiByPSIzMCIgZmlsbD0iI2NjYyIvPjxwYXRoIGQ9Ik02MCAxNDAgQzYwIDEyMCA4MCAxMTAgMTAwIDExMCBDMTIwIDExMCAxNDAgMTIwIDE0MCAxNDAgTDYwIDE0MCIgZmlsbD0iI2NjYyIvPjwvc3ZnPg=='
|
|||
|
|
|
|||
|
|
// 默认商品图片
|
|||
|
|
const DEFAULT_PRODUCT = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI2Y1ZjVmNSIvPjxyZWN0IHg9IjYwIiB5PSI2MCIgd2lkdGg9IjgwIiBoZWlnaHQ9IjgwIiBmaWxsPSIjZGRkIi8+PHRleHQgeD0iMTAwIiB5PSIxMzAiIGZvbnQtc2l6ZT0iMTQiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZpbGw9IiM5OTkiPuaaguaXoOWbvueJhzwvdGV4dD48L3N2Zz4='
|
|||
|
|
|
|||
|
|
// 默认背景图片
|
|||
|
|
const DEFAULT_BACKGROUND = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0eWxlPSJzdG9wLWNvbG9yOiM2NmJiNmE7c3RvcC1vcGFjaXR5OjEiIC8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdHlsZT0ic3RvcC1jb2xvcjojNDNhMDQ3O3N0b3Atb3BhY2l0eToxIiAvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHdpZHRoPSI2MDAiIGhlaWdodD0iMzAwIiBmaWxsPSJ1cmwoI2cpIi8+PC9zdmc+'
|
|||
|
|
|
|||
|
|
// API基础URL - 根据环境自动切换
|
|||
|
|
// #ifdef MP-WEIXIN
|
|||
|
|
const API_BASE_URL = 'https://px.ddn-ai.cloud/api' // 生产环境
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
// #ifdef H5
|
|||
|
|
const API_BASE_URL = process.env.NODE_ENV === 'production'
|
|||
|
|
? 'https://px.ddn-ai.cloud/api' // 生产环境
|
|||
|
|
: 'http://localhost:8089' // 开发环境
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
// #ifndef MP-WEIXIN || H5
|
|||
|
|
const API_BASE_URL = 'http://localhost:8089' // 其他环境默认本地
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取图片URL
|
|||
|
|
* @param {String} url - 图片URL或路径
|
|||
|
|
* @param {String} type - 图片类型:avatar, product, background
|
|||
|
|
* @returns {String} 完整的图片URL
|
|||
|
|
*/
|
|||
|
|
export function getImageUrl(url, type = 'avatar') {
|
|||
|
|
// 如果没有URL,返回默认图片
|
|||
|
|
if (!url) {
|
|||
|
|
return getDefaultImage(type)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果是完整的HTTP/HTTPS URL,直接返回
|
|||
|
|
if (url.startsWith('http://') || url.startsWith('https://')) {
|
|||
|
|
return url
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果是base64或data URL,直接返回
|
|||
|
|
if (url.startsWith('data:')) {
|
|||
|
|
return url
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果是相对路径,拼接API基础URL
|
|||
|
|
if (url.startsWith('/')) {
|
|||
|
|
return `${API_BASE_URL}${url}`
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 其他情况,拼接API基础URL
|
|||
|
|
return `${API_BASE_URL}/${url}`
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取默认图片
|
|||
|
|
* @param {String} type - 图片类型
|
|||
|
|
* @returns {String} 默认图片的base64编码
|
|||
|
|
*/
|
|||
|
|
export function getDefaultImage(type = 'avatar') {
|
|||
|
|
switch (type) {
|
|||
|
|
case 'avatar':
|
|||
|
|
return DEFAULT_AVATAR
|
|||
|
|
case 'product':
|
|||
|
|
return DEFAULT_PRODUCT
|
|||
|
|
case 'background':
|
|||
|
|
return DEFAULT_BACKGROUND
|
|||
|
|
default:
|
|||
|
|
return DEFAULT_AVATAR
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 处理图片加载错误
|
|||
|
|
* @param {Event} e - 错误事件
|
|||
|
|
* @param {String} type - 图片类型
|
|||
|
|
*/
|
|||
|
|
export function handleImageError(e, type = 'avatar') {
|
|||
|
|
console.warn('图片加载失败:', e)
|
|||
|
|
// 返回默认图片
|
|||
|
|
return getDefaultImage(type)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取头像URL
|
|||
|
|
* @param {String} avatar - 头像URL或路径
|
|||
|
|
* @returns {String} 完整的头像URL
|
|||
|
|
*/
|
|||
|
|
export function getAvatarUrl(avatar) {
|
|||
|
|
return getImageUrl(avatar, 'avatar')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取商品图片URL
|
|||
|
|
* @param {String} image - 图片URL或路径
|
|||
|
|
* @returns {String} 完整的图片URL
|
|||
|
|
*/
|
|||
|
|
export function getProductImageUrl(image) {
|
|||
|
|
return getImageUrl(image, 'product')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取背景图片URL
|
|||
|
|
* @param {String} image - 图片URL或路径
|
|||
|
|
* @returns {String} 完整的图片URL
|
|||
|
|
*/
|
|||
|
|
export function getBackgroundImageUrl(image) {
|
|||
|
|
return getImageUrl(image, 'background')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 批量处理图片URL
|
|||
|
|
* @param {Array} images - 图片数组
|
|||
|
|
* @param {String} type - 图片类型
|
|||
|
|
* @returns {Array} 处理后的图片URL数组
|
|||
|
|
*/
|
|||
|
|
export function processImages(images, type = 'product') {
|
|||
|
|
if (!Array.isArray(images)) {
|
|||
|
|
return []
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return images.map(img => {
|
|||
|
|
if (typeof img === 'string') {
|
|||
|
|
return getImageUrl(img, type)
|
|||
|
|
}
|
|||
|
|
if (img && img.url) {
|
|||
|
|
return getImageUrl(img.url, type)
|
|||
|
|
}
|
|||
|
|
return getDefaultImage(type)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
getImageUrl,
|
|||
|
|
getDefaultImage,
|
|||
|
|
handleImageError,
|
|||
|
|
getAvatarUrl,
|
|||
|
|
getProductImageUrl,
|
|||
|
|
getBackgroundImageUrl,
|
|||
|
|
processImages
|
|||
|
|
}
|