diff --git a/player.html b/player.html
index 6d6bc86..828636b 100644
--- a/player.html
+++ b/player.html
@@ -746,6 +746,11 @@
+
+
@@ -960,9 +965,9 @@
setTimeout(() => els.loader.remove(), 600);
}
- async function renderUI(data) {
+ async function renderUI(data) {
els.songTitle.innerText = data.title;
-
+
// 预加载图片并转换为 Blob URL (解决跨域和缓存问题)
try {
const imgRes = await fetch(data.img);
@@ -1656,47 +1661,49 @@
// 启动渲染循环：html-to-image 截图
// 目标帧率 120 FPS，不再使用 setTimeout 限流，而是全力渲染
const targetFPS = 120;
-
+
async function renderLoop() {
if (!isMVRecording) return;
-
+ console.log('renderLoop');
+
+
// 标记开始处理
const beginTime = Date.now();
try {
- const source = document.querySelector('.main-container');
- if (source) {
- // 恢复高清录制，限制最大 dpr 为 2 以平衡性能
- const dpr = Math.min(window.devicePixelRatio || 1, 2);
- const canvas = await htmlToImage.toCanvas(source, {
- backgroundColor: null,
- pixelRatio: dpr,
- skipAutoScale: true,
- cacheBust: false,
- fontEmbedCSS: '', // 禁用字体嵌入，防止崩溃
- filter: (node) => {
- // 过滤无效图片防止崩溃
- if (node.tagName === 'IMG' && (!node.src || node.src === window.location.href)) return false;
- return true;
- },
- style: {
- transform: 'translateZ(0)'
- }
- });
-
- // 将捕捉到的画面绘制到录制画布上
- mvCtx.clearRect(0, 0, mvCanvas.width, mvCanvas.height);
- mvCtx.drawImage(canvas, 0, 0, mvCanvas.width, mvCanvas.height);
- }
+ const source = document.querySelector('.main-container');
+ if (source) {
+ // 恢复高清录制，限制最大 dpr 为 2 以平衡性能
+ const dpr = Math.min(window.devicePixelRatio || 1, 2);
+ const canvas = await htmlToImage.toCanvas(source, {
+ backgroundColor: null,
+ pixelRatio: dpr,
+ skipAutoScale: true,
+ cacheBust: false,
+ fontEmbedCSS: '', // 禁用字体嵌入，防止崩溃
+ filter: (node) => {
+ // 过滤无效图片防止崩溃
+ if (node.tagName === 'IMG' && (!node.src || node.src === window.location.href)) return false;
+ return true;
+ },
+ style: {
+ transform: 'translateZ(0)'
+ }
+ });
+
+ // 将捕捉到的画面绘制到录制画布上
+ mvCtx.clearRect(0, 0, mvCanvas.width, mvCanvas.height);
+ mvCtx.drawImage(canvas, 0, 0, mvCanvas.width, mvCanvas.height);
+ }
} catch (e) {
- console.error('Frame capture error:', e);
+ console.error('Frame capture error:', e);
}
-
+
// 不再使用 setTimeout 进行延时，避免 JS 定时器精度问题导致的抖动
// 直接请求下一帧，让浏览器决定最佳时机（通常是 60Hz，如果设备支持高刷则更高）
// 这样可以消除人为引入的卡顿
if (isMVRecording) {
- mvRafId = requestAnimationFrame(renderLoop);
+ mvRafId = requestAnimationFrame(renderLoop);
}
}
mvRafId = requestAnimationFrame(renderLoop);