优化缩略图

release/UNIVERSAL_SpineViewer/viewer/spine.html

@@ -105,6 +105,12 @@
 				<label class="animated-thumb-quality"><span data-i18n="viewer.animatedMaxSize">缩略图大小</span>
 					<span class="animated-thumb-size"><input id="animatedThumbMaxSize" type="number" min="10" max="1024" step="10" value="30"><span>KB</span></span>
 				</label>
+				<label class="animated-thumb-quality"><span data-i18n="viewer.animatedCanvas">输出尺寸</span>
+					<select id="animatedThumbCanvas">
+						<option value="200" selected>200 × 200</option>
+						<option value="400">400 × 400</option>
+					</select>
+				</label>
 				<label class="animated-thumb-quality"><span data-i18n="viewer.animatedPriority">优先级别</span>
 					<select id="animatedThumbPriority">
 						<option value="resolution" data-i18n="viewer.priorityResolution">分辨率优先</option>
@@ -818,6 +824,7 @@
 		const endInput = document.getElementById('animatedThumbEnd');
 		const formatInput = document.getElementById('animatedThumbFormat');
 		const priorityInput = document.getElementById('animatedThumbPriority');
+		const canvasInput = document.getElementById('animatedThumbCanvas');
 		const maxSizeInput = document.getElementById('animatedThumbMaxSize');
 		const errorEl = document.getElementById('animatedThumbDialogError');
 		const confirm = document.getElementById('animatedThumbDialogConfirm');
@@ -830,6 +837,7 @@
 		endInput.max = String(totalFrames);
 		formatInput.value = 'webp';
 		priorityInput.value = animatedProfileConfig.DEFAULT_PRIORITY;
+		canvasInput.value = String(animatedProfileConfig.DEFAULT_OUTPUT_SIZE);
 		maxSizeInput.value = '30';
 		errorEl.textContent = '';
 		dialog.classList.remove('hidden');
@@ -858,6 +866,7 @@
 					end: Math.min(endFrame / FPS, animationLength),
 					format: formatInput.value === 'apng' ? 'apng' : 'webp',
 					priority: priorityInput.value,
+					canvasSize: Number(canvasInput.value) || animatedProfileConfig.DEFAULT_OUTPUT_SIZE,
 					maxKilobytes,
 				});
 			};
@@ -950,7 +959,7 @@
 	}
 
 	async function renderAnimatedSourceFrames(animation, options) {
-		const size = 400;
+		const size = options.canvasSize || animatedProfileConfig.DEFAULT_OUTPUT_SIZE;
 		const range = options.end - options.start;
 		// 长动画保持完整时间范围，但自动降低采样帧率，避免内存和输出体积失控。
 		const frameCount = Math.max(2, Math.min(240, Math.ceil(range * 18)));
@@ -1101,8 +1110,8 @@
 		const confirmButton = document.getElementById('animatedPickConfirm');
 		const targetBytes = options.maxKilobytes * 1024;
 		// 锚点插值成更密的搜索路径，候选数量仍按锚点数量给。
-		const searchPath = animatedProfileConfig.expandAnimatedPath(options.priority);
-		const candidateCount = animatedProfiles(options.priority).length;
+		const searchPath = animatedProfileConfig.expandAnimatedPath(options.priority, options.canvasSize);
+		const candidateCount = animatedProfiles(options.priority, options.canvasSize).length;
 		// 4 个离屏画布轮转：每帧编码互相独立，成批提交比逐帧等待快得多。
 		const pool = Array.from({ length: 4 }, () => {
 			const off = document.createElement('canvas');