vuepress-plugin-photomap
Version:
VuePress2插件，用于在文章中插入照片地图组件，类似Apple相册的PhotoMap功能
63 lines (62 loc) • 1.6 kB
JavaScript
/**
* 图片加载工具函数
*/
/**
* 预加载图片并获取尺寸信息
*/
export const preloadImage = (src) => {
return new Promise((resolve, reject) => {
const img = new Image();
img.crossOrigin = 'anonymous';
img.onload = () => {
resolve({
src,
alt: '',
width: img.naturalWidth,
height: img.naturalHeight
});
};
img.onerror = () => {
reject(new Error(`Failed to load image: ${src}`));
};
img.src = src;
});
};
/**
* 批量预加载图片
*/
export const preloadImages = async (srcs) => {
const promises = srcs.map(src => preloadImage(src));
return Promise.all(promises);
};
/**
* 检查图片URL是否有效
*/
export const isValidImageUrl = (url) => {
if (!url || typeof url !== 'string')
return false;
// 基本URL格式检查
try {
new URL(url);
}
catch {
// 可能是相对路径，检查是否以图片扩展名结尾
const imageExtensions = /\.(jpg|jpeg|png|gif|bmp|webp|svg)(\?.*)?$/i;
return imageExtensions.test(url);
}
return true;
};
/**
* 获取图片的缩略图URL（如果支持）
*/
export const getThumbnailUrl = (url, size = 200) => {
// 这里可以实现缩略图生成逻辑
// 例如集成第三方图片处理服务
return url;
};
/**
* 生成图片的唯一标识符
*/
export const generateImageId = (src, alt) => {
return btoa(encodeURIComponent(`${src}-${alt}`)).replace(/[^a-zA-Z0-9]/g, '');
};