Nuxt2引入Gif.js与SSR环境下部署遇到的问题解决

export function drawFrame(ctx, img, backgroundColor, bgImg, maxWidth = GIF_WIDTH, maxHeight = GIF_HEIGHT) {// 绘制单帧图片
	ctx.fillStyle = backgroundColor || '#ffffff'
	ctx.fillRect(0, 0, maxWidth, maxHeight)

	if (bgImg) {
		ctx.drawImage(bgImg, 0, 0, maxWidth, maxHeight)// 绘制背景图
	}

	const { drawWidth, drawHeight, offsetX, offsetY } = calculateDrawParams(img, maxWidth, maxHeight)
	ctx.drawImage(img, offsetX, offsetY, drawWidth, drawHeight)// 绘制当前帧图片	
}

for (let i = 0; i < orderedImgs.length; i++) {
		const img = orderedImgs[i]
		const canvas = document.createElement('canvas')
		canvas.width = GIF_WIDTH
		canvas.height = GIF_HEIGHT
		const ctx = canvas.getContext('2d')

		drawFrame(ctx, img, backgroundColor, bgImg)
		// 直接获取 ImageData 数据并传递给 gif.js，避免 canvas 引用带来的潜在问题
		const imageData = ctx.getImageData(0, 0, GIF_WIDTH, GIF_HEIGHT)
		gif.addFrame(imageData, { delay: adjustedDelay })
		console.log(`添加第${i + 1}帧成功`)
}

// 辅助函数：根据当前页面路径自动探测并返回可能的本地资源路径
function getPossibleLocalPaths(fileRelativePath) {
	if (typeof window === 'undefined') return [fileRelativePath];// 服务端环境直接返回相对路径

	const origin = window.location.origin;// 获取当前页面的域名，例如 https://www.xxx.com
	const pathname = window.location.pathname; // 获取当前页面的路径名
	const segments = pathname.split('/').filter(Boolean); 

	const paths = [
		origin + fileRelativePath, // 1. 绝对根路径: /worker/gif.js
	];

	// 2. 逐级向上探测路径 (解决子目录部署问题)
	let currentBase = origin;
	for (const segment of segments) {
		currentBase += '/' + segment;
		paths.push(currentBase + fileRelativePath);
	}

	// 3. 相对路径 (针对当前深层路由的情况)
	paths.push('.' + fileRelativePath);
	paths.push('..' + fileRelativePath);
	paths.push('../../' + fileRelativePath);
	paths.push('../../../' + fileRelativePath);

	// 去重并返回
	return Array.from(new Set(paths));
}

export function calculateFrameParams(totalFrames, maxFrames = GIF_MAX_FRAMES) {
	const frames = Math.min(maxFrames, totalFrames)
	const step = Math.ceil(totalFrames / frames)
	const frameCount = Math.ceil(totalFrames / step) 
	return { frames, step, frameCount }// 返回实际生成的帧数、步长和总帧数
}

// 动态导入 gif.js，避免 SSR 时 navigator is not defined
const GIFModule = await import('@/assets/js/gif.js');

// 排除 assets/js 目录下已经压缩过的库文件，防止编译报错 
build: {
  babel: {
    exclude: [
      /[\\/]assets[\\/]js[\\/]gif\.js/
    ]
  }
}

export async function ImagetryLoad(src, maxAttempts = 3) {
	if (typeof window === 'undefined') return null

	for (let attempt = 1; attempt <= maxAttempts; attempt++) {
		const url = attempt === 1 ? src : `${src}${src.includes('?') ? '&' : '?'}_r=${Date.now()}_${attempt}` // 避免缓存问题
		try {
			const img = await new Promise((resolve, reject) => {
				const i = new Image()
				i.crossOrigin = 'anonymous' // 跨域加载图片
				i.onload = () => {
					if (i.naturalWidth > 0 && i.naturalHeight > 0) resolve(i)
					else reject(new Error('invalid image'))
				}
				i.onerror = () => reject(new Error('load error'))
				i.src = url
			})
			return img
		} catch (e) {}
	}
	return null
}