From da1e11fb745067658f49765945e49512fb563cd7 Mon Sep 17 00:00:00 2001
From: hyper <hx.hyper@qq.com>
Date: Fri, 27 Feb 2026 21:42:48 +0800
Subject: [PATCH] fix: pdf backgorund

---
 src/components/md-bg.tsx                     | 37 ++++++++------------
 src/components/md-deck/hooks/usePDFExport.ts |  4 +--
 2 files changed, 16 insertions(+), 25 deletions(-)

diff --git a/src/components/md-bg.tsx b/src/components/md-bg.tsx
index 2fe12ab..fa5c0be 100644
--- a/src/components/md-bg.tsx
+++ b/src/components/md-bg.tsx
@@ -1,5 +1,5 @@
 import { customElement, noShadowDOM } from "solid-element";
-import { createEffect, createResource } from "solid-js";
+import {createEffect, onCleanup} from "solid-js";
 import { resolvePath } from "./utils/path";
 
 export interface BgProps {
@@ -18,34 +18,25 @@ customElement("md-bg", { fit: "cover" }, (props, { element }) => {
   }
 
   // 从父节点 article 的 data-src 获取当前 markdown 文件完整路径
-  const articleEl = element?.closest('article');
+  const articleEl = element?.closest('article') as HTMLElement;
   const articlePath = articleEl?.getAttribute('data-src') || '';
 
   // 解析相对路径
   const resolvedSrc = resolvePath(articlePath, rawSrc);
 
-  // 加载图片
-  const loadImage = (src: string): Promise<HTMLImageElement> => {
-    return new Promise((resolve, reject) => {
-      const img = new Image();
-      img.onload = () => resolve(img);
-      img.onerror = reject;
-      img.src = src;
-    });
-  };
-
-  const [image] = createResource(resolvedSrc, loadImage);
-
   createEffect(() => {
-    // 图片加载完成后，将背景图片设置到 article 元素
-    if(!articleEl)return;
-    articleEl.style.backgroundImage = '';
-    if (image()) {
-        articleEl.style.backgroundImage = `url(${resolvedSrc})`;
-        articleEl.style.backgroundSize = props.fit || 'cover';
-        articleEl.style.backgroundPosition = 'center';
-        articleEl.style.backgroundRepeat = 'no-repeat';
-    }
+    if(!articleEl) return;
+    articleEl.dataset.mdbg = resolvedSrc;
+    articleEl.style.backgroundImage = `url(${resolvedSrc})`;
+    articleEl.style.backgroundSize = props.fit || 'cover';
+    articleEl.style.backgroundPosition = 'center';
+    articleEl.style.backgroundRepeat = 'no-repeat';
+  });
+  
+  onCleanup(() => {
+      if(articleEl?.dataset?.mdbg !== resolvedSrc)
+          return;
+      articleEl.style.backgroundImage = '';
   });
 
   return null;
diff --git a/src/components/md-deck/hooks/usePDFExport.ts b/src/components/md-deck/hooks/usePDFExport.ts
index fb06863..7acf630 100644
--- a/src/components/md-deck/hooks/usePDFExport.ts
+++ b/src/components/md-deck/hooks/usePDFExport.ts
@@ -75,7 +75,7 @@ async function renderCardToCanvas(card: PageCard, options: ExportOptions): Promi
   gridContainer.style.height = `${gridAreaHeight}mm`;
 
   for (const layer of visibleLayers) {
-    const layerEl = document.createElement('div');
+    const layerEl = document.createElement('article');
     layerEl.className = 'absolute flex items-center justify-center text-center prose prose-sm';
     Object.assign(layerEl.style, getLayerStyle(layer, dimensions));
     layerEl.style.fontSize = `${fontSize}mm`;
@@ -92,7 +92,7 @@ async function renderCardToCanvas(card: PageCard, options: ExportOptions): Promi
       scale: 2,
       backgroundColor: null,
       logging: false,
-      useCORS: true
+      useCORS: true,
     });
   } finally {
     document.body.removeChild(container);