From 630692b507a29f266c7eeae395c33048f1d0e4ee Mon Sep 17 00:00:00 2001
From: alikia2x <alikia2x@outlook.com>
Date: Sun, 3 Nov 2024 00:42:05 +0800
Subject: [PATCH] fix: when cover resolution too low, image on the UI won't
 fill the container improve: adjust margin of cover and interactiveBox

---
 packages/core/components/cover.svelte         |  3 +-
 .../core/components/interactiveBox.svelte     |  2 +-
 .../src/routes/play/[id]/+page.svelte         | 44 +++++++++++++++++--
 .../web/src/routes/play/[id]/+page.svelte     | 42 ++++++++++++++++--
 4 files changed, 82 insertions(+), 9 deletions(-)

diff --git a/packages/core/components/cover.svelte b/packages/core/components/cover.svelte
index 6767845..325788b 100644
--- a/packages/core/components/cover.svelte
+++ b/packages/core/components/cover.svelte
@@ -12,8 +12,9 @@
 {#if hasLyrics}
 <img
     class="absolute shadow-md select-none z-10 object-cover rounded-lg md:rounded-2xl max-md:h-20 max-xl:h-32 max-xl:top-6 md:max-h-[calc(94vh-20rem)] xl:w-auto max-w-[90%] xl:max-w-[37vw]
-    md:bottom-80 left-6 md:left-[calc(7vw-1rem)] lg:left-[calc(12vw-1rem)] xl:translate-x-[-50%] xl:left-[25vw]"
+    md:bottom-[21rem] left-6 md:left-[calc(7vw-1rem)] lg:left-[calc(12vw-1rem)] xl:translate-x-[-50%] xl:left-[25vw]"
     src={path}
+    width="1200"
     alt="封面"
 />
 {:else}
diff --git a/packages/core/components/interactiveBox.svelte b/packages/core/components/interactiveBox.svelte
index 843216d..2c74559 100644
--- a/packages/core/components/interactiveBox.svelte
+++ b/packages/core/components/interactiveBox.svelte
@@ -78,7 +78,7 @@
 {/if}
 
 <div
-    class={'absolute select-none bottom-2 h-60 w-[86vw] left-[7vw] z-10 ' +
+    class={'absolute select-none bottom-12 h-60 w-[86vw] left-[7vw] z-10 ' +
         (hasLyrics
             ? 'lg:w-[76vw] lg:left-[12vw] xl:w-[37vw] xl:left-[7vw]'
             : 'lg:w-[76vw] lg:left-[12vw] xl:w-[37vw] xl:left-[31.5vw]')}
diff --git a/packages/electron/src/routes/play/[id]/+page.svelte b/packages/electron/src/routes/play/[id]/+page.svelte
index e31e03b..0a7f6b5 100644
--- a/packages/electron/src/routes/play/[id]/+page.svelte
+++ b/packages/electron/src/routes/play/[id]/+page.svelte
@@ -81,10 +81,46 @@
         });
         localforage.getItem(`${audioId}-cover`, function (err, file) {
             if (file) {
-                const path = URL.createObjectURL(file as File);
-                coverPath.set(path);
+                const img = new Image();
+                img.src = URL.createObjectURL(file as File);
+
+                img.onload = function () {
+                    const canvas = document.createElement('canvas');
+                    const ctx = canvas.getContext('2d');
+
+                    // 计算新的宽度和高度，确保宽度至少为1200px
+                    let newWidth = img.width;
+                    let newHeight = img.height;
+
+                    console.log(newWidth)
+
+                    if (newWidth < 1200) {
+                        newWidth = 1200;
+                        newHeight = (img.height * 1200) / img.width;
+                    }
+
+                    canvas.width = newWidth;
+                    canvas.height = newHeight;
+
+                    // 绘制放大后的图片到canvas
+                    ctx!.drawImage(img, 0, 0, newWidth, newHeight);
+
+                    // 将canvas内容转换为Blob
+                    canvas.toBlob(function (blob) {
+                        const path = URL.createObjectURL(blob!);
+                        coverPath.set(path);
+                    }, 'image/jpeg'); // 你可以根据需要更改图片格式
+
+                    prepared.push('cover');
+                };
+
+                img.onerror = function () {
+                    console.error('Failed to load image');
+                    prepared.push('cover');
+                };
+            } else {
+                prepared.push('cover');
             }
-            prepared.push('cover');
         });
         localforage.getItem(`${audioId}-file`, function (err, file) {
             if (audioPlayer === null) return;
@@ -211,7 +247,7 @@
     {hasLyrics}
 />
 
-<NewLyrics {originalLyrics} progress={currentProgress} player={audioPlayer}/>
+<NewLyrics {originalLyrics} progress={currentProgress} player={audioPlayer} />
 
 <!-- <Lyrics lyrics={lyricsText} {originalLyrics} progress={currentProgress} player={audioPlayer} class="hidden" /> -->
 
diff --git a/packages/web/src/routes/play/[id]/+page.svelte b/packages/web/src/routes/play/[id]/+page.svelte
index 75e9600..70d1fc7 100644
--- a/packages/web/src/routes/play/[id]/+page.svelte
+++ b/packages/web/src/routes/play/[id]/+page.svelte
@@ -81,10 +81,46 @@
         });
         localforage.getItem(`${audioId}-cover`, function (err, file) {
             if (file) {
-                const path = URL.createObjectURL(file as File);
-                coverPath.set(path);
+                const img = new Image();
+                img.src = URL.createObjectURL(file as File);
+
+                img.onload = function () {
+                    const canvas = document.createElement('canvas');
+                    const ctx = canvas.getContext('2d');
+
+                    // 计算新的宽度和高度，确保宽度至少为1200px
+                    let newWidth = img.width;
+                    let newHeight = img.height;
+
+                    console.log(newWidth)
+
+                    if (newWidth < 1200) {
+                        newWidth = 1200;
+                        newHeight = (img.height * 1200) / img.width;
+                    }
+
+                    canvas.width = newWidth;
+                    canvas.height = newHeight;
+
+                    // 绘制放大后的图片到canvas
+                    ctx!.drawImage(img, 0, 0, newWidth, newHeight);
+
+                    // 将canvas内容转换为Blob
+                    canvas.toBlob(function (blob) {
+                        const path = URL.createObjectURL(blob!);
+                        coverPath.set(path);
+                    }, 'image/jpeg'); // 你可以根据需要更改图片格式
+
+                    prepared.push('cover');
+                };
+
+                img.onerror = function () {
+                    console.error('Failed to load image');
+                    prepared.push('cover');
+                };
+            } else {
+                prepared.push('cover');
             }
-            prepared.push('cover');
         });
         localforage.getItem(`${audioId}-file`, function (err, file) {
             if (audioPlayer === null) return;