hypercross
/
ttrpg-tools
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: pdf backgorund

This commit is contained in:
hyper 2026-02-27 21:42:48 +08:00
parent 7e95c44d8d
commit da1e11fb74
2 changed files with 16 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/md-bg.tsx
View File

@ -1,5 +1,5 @@
import { customElement, noShadowDOM } from "solid-element"; import { customElement, noShadowDOM } from "solid-element";
import { createEffect, createResource } from "solid-js"; import {createEffect, onCleanup} from "solid-js";
import { resolvePath } from "./utils/path"; import { resolvePath } from "./utils/path";
export interface BgProps { export interface BgProps {
@ -18,34 +18,25 @@ customElement("md-bg", { fit: "cover" }, (props, { element }) => {
} }
// 从父节点 article 的 data-src 获取当前 markdown 文件完整路径 // 从父节点 article 的 data-src 获取当前 markdown 文件完整路径
const articleEl = element?.closest('article'); const articleEl = element?.closest('article') as HTMLElement;
const articlePath = articleEl?.getAttribute('data-src') || ''; const articlePath = articleEl?.getAttribute('data-src') || '';
// 解析相对路径 // 解析相对路径
const resolvedSrc = resolvePath(articlePath, rawSrc); 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(() => { createEffect(() => {
// 图片加载完成后，将背景图片设置到 article 元素 if(!articleEl) return;
if(!articleEl)return; articleEl.dataset.mdbg = resolvedSrc;
articleEl.style.backgroundImage = ''; articleEl.style.backgroundImage = `url(${resolvedSrc})`;
if (image()) { articleEl.style.backgroundSize = props.fit || 'cover';
articleEl.style.backgroundImage = `url(${resolvedSrc})`; articleEl.style.backgroundPosition = 'center';
articleEl.style.backgroundSize = props.fit || 'cover'; articleEl.style.backgroundRepeat = 'no-repeat';
articleEl.style.backgroundPosition = 'center'; });
articleEl.style.backgroundRepeat = 'no-repeat';
} onCleanup(() => {
if(articleEl?.dataset?.mdbg !== resolvedSrc)
return;
articleEl.style.backgroundImage = '';
}); });
return null; return null;

4
src/components/md-deck/hooks/usePDFExport.ts
View File

@ -75,7 +75,7 @@ async function renderCardToCanvas(card: PageCard, options: ExportOptions): Promi
gridContainer.style.height = `${gridAreaHeight}mm`; gridContainer.style.height = `${gridAreaHeight}mm`;
for (const layer of visibleLayers) { 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'; layerEl.className = 'absolute flex items-center justify-center text-center prose prose-sm';
Object.assign(layerEl.style, getLayerStyle(layer, dimensions)); Object.assign(layerEl.style, getLayerStyle(layer, dimensions));
layerEl.style.fontSize = `${fontSize}mm`; layerEl.style.fontSize = `${fontSize}mm`;
@ -92,7 +92,7 @@ async function renderCardToCanvas(card: PageCard, options: ExportOptions): Promi
scale: 2, scale: 2,
backgroundColor: null, backgroundColor: null,
logging: false, logging: false,
useCORS: true useCORS: true,
}); });
} finally { } finally {
document.body.removeChild(container); document.body.removeChild(container);