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

@@ -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}

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]')}

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);
+                const img = new Image();
-                coverPath.set(path);
+                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');
+            }
         });
         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" /> -->
 

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);
+                const img = new Image();
-                coverPath.set(path);
+                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');
+            }
         });
         localforage.getItem(`${audioId}-file`, function (err, file) {
             if (audioPlayer === null) return;