540 lines
16 KiB
TypeScript
540 lines
16 KiB
TypeScript
/**
|
|
* Lightweight PPTX → Image renderer.
|
|
*
|
|
* Extracts text and images from each slide and renders them
|
|
* directly to canvas, returning PNG data URLs.
|
|
*
|
|
* Uses jszip (dynamically imported) and the browser Canvas 2D API.
|
|
* No theme resolution, charts, SmartArt, or animations — preview only.
|
|
*/
|
|
|
|
const EMU_PER_PX = 9525;
|
|
const emuToPx = (emu: number) => Math.round(emu / EMU_PER_PX);
|
|
|
|
const parseEmu = (val: string | null | undefined): number => (val ? parseInt(val, 10) || 0 : 0);
|
|
|
|
type ZipLike = {
|
|
file: (path: string) => { async: (type: 'text' | 'base64') => Promise<string> } | null;
|
|
files: Record<string, unknown>;
|
|
};
|
|
|
|
type Relationship = {
|
|
type: string;
|
|
target: string;
|
|
};
|
|
|
|
type Rect = {
|
|
x: number;
|
|
y: number;
|
|
w: number;
|
|
h: number;
|
|
};
|
|
|
|
type Placeholder = {
|
|
type: string;
|
|
idx: string;
|
|
rect: Rect;
|
|
};
|
|
|
|
type TextToken = {
|
|
text: string;
|
|
fontPt: number;
|
|
bold: boolean;
|
|
italic: boolean;
|
|
color: string;
|
|
width: number;
|
|
};
|
|
|
|
const getTag = (el: Element) => el.tagName.split(':').pop();
|
|
|
|
const normalizePath = (path: string) => {
|
|
const parts: string[] = [];
|
|
for (const part of path.split('/')) {
|
|
if (!part || part === '.') continue;
|
|
if (part === '..') parts.pop();
|
|
else parts.push(part);
|
|
}
|
|
return parts.join('/');
|
|
};
|
|
|
|
const dirname = (path: string) => path.slice(0, path.lastIndexOf('/'));
|
|
const basename = (path: string) => path.slice(path.lastIndexOf('/') + 1);
|
|
|
|
const resolveTarget = (sourcePath: string, target: string) => {
|
|
const cleanTarget = target.split('#')[0];
|
|
if (cleanTarget.startsWith('/')) return normalizePath(cleanTarget.slice(1));
|
|
return normalizePath(`${dirname(sourcePath)}/${cleanTarget}`);
|
|
};
|
|
|
|
const readXml = async (zip: ZipLike, path: string): Promise<Document | null> => {
|
|
const file = zip.file(path);
|
|
if (!file) return null;
|
|
const text = await file.async('text');
|
|
return new DOMParser().parseFromString(text, 'application/xml');
|
|
};
|
|
|
|
const readRels = async (
|
|
zip: ZipLike,
|
|
sourcePath: string
|
|
): Promise<Record<string, Relationship>> => {
|
|
const relsPath = `${dirname(sourcePath)}/_rels/${basename(sourcePath)}.rels`;
|
|
const relsDoc = await readXml(zip, relsPath);
|
|
const rels: Record<string, Relationship> = {};
|
|
if (!relsDoc) return rels;
|
|
|
|
for (const rel of Array.from(relsDoc.getElementsByTagName('Relationship'))) {
|
|
const id = rel.getAttribute('Id') ?? '';
|
|
const target = rel.getAttribute('Target') ?? '';
|
|
if (!id || !target || rel.getAttribute('TargetMode') === 'External') continue;
|
|
|
|
rels[id] = {
|
|
type: rel.getAttribute('Type') ?? '',
|
|
target: resolveTarget(sourcePath, target)
|
|
};
|
|
}
|
|
|
|
return rels;
|
|
};
|
|
|
|
const getRelationshipTarget = (
|
|
rels: Record<string, Relationship>,
|
|
typeSuffix: string
|
|
): string | null => {
|
|
const rel = Object.values(rels).find((entry) => entry.type.endsWith(typeSuffix));
|
|
return rel?.target ?? null;
|
|
};
|
|
|
|
const parseXfrm = (shape: Element): Rect | null => {
|
|
const xfrm = shape.getElementsByTagName('a:xfrm')[0] ?? shape.getElementsByTagName('p:xfrm')[0];
|
|
if (!xfrm) return null;
|
|
|
|
const off = xfrm.getElementsByTagName('a:off')[0];
|
|
const ext = xfrm.getElementsByTagName('a:ext')[0];
|
|
if (!off || !ext) return null;
|
|
|
|
const rect = {
|
|
x: emuToPx(parseEmu(off.getAttribute('x'))),
|
|
y: emuToPx(parseEmu(off.getAttribute('y'))),
|
|
w: emuToPx(parseEmu(ext.getAttribute('cx'))),
|
|
h: emuToPx(parseEmu(ext.getAttribute('cy')))
|
|
};
|
|
|
|
return rect.w === 0 && rect.h === 0 ? null : rect;
|
|
};
|
|
|
|
const getPlaceholder = (shape: Element): { type: string; idx: string } | null => {
|
|
const ph = shape.getElementsByTagName('p:ph')[0];
|
|
if (!ph) return null;
|
|
return {
|
|
type: ph.getAttribute('type') ?? 'body',
|
|
idx: ph.getAttribute('idx') ?? ''
|
|
};
|
|
};
|
|
|
|
const normalizePlaceholderType = (type: string) => (type === 'ctrTitle' ? 'title' : type);
|
|
|
|
const placeholderKeys = ({ type, idx }: { type: string; idx: string }) => {
|
|
const normalizedType = normalizePlaceholderType(type);
|
|
return [
|
|
idx ? `${type}:${idx}` : '',
|
|
idx ? `${normalizedType}:${idx}` : '',
|
|
type,
|
|
normalizedType,
|
|
idx ? `idx:${idx}` : ''
|
|
].filter(Boolean);
|
|
};
|
|
|
|
const collectPlaceholders = (doc: Document | null): Record<string, Placeholder> => {
|
|
const placeholders: Record<string, Placeholder> = {};
|
|
if (!doc) return placeholders;
|
|
|
|
for (const shape of Array.from(doc.getElementsByTagName('p:sp'))) {
|
|
const ph = getPlaceholder(shape);
|
|
const rect = parseXfrm(shape);
|
|
if (!ph || !rect) continue;
|
|
|
|
for (const key of placeholderKeys(ph)) {
|
|
placeholders[key] ??= { ...ph, rect };
|
|
}
|
|
}
|
|
|
|
return placeholders;
|
|
};
|
|
|
|
const findPlaceholder = (
|
|
ph: { type: string; idx: string } | null,
|
|
placeholderSources: Record<string, Placeholder>[]
|
|
): Placeholder | null => {
|
|
if (!ph) return null;
|
|
for (const key of placeholderKeys(ph)) {
|
|
for (const placeholders of placeholderSources) {
|
|
if (placeholders[key]) return placeholders[key];
|
|
}
|
|
}
|
|
return null;
|
|
};
|
|
|
|
const fallbackPlaceholderRect = (
|
|
ph: { type: string; idx: string } | null,
|
|
slideW: number,
|
|
slideH: number
|
|
): Rect | null => {
|
|
if (!ph) return null;
|
|
const type = normalizePlaceholderType(ph.type);
|
|
if (type === 'title') {
|
|
return { x: slideW * 0.06, y: slideH * 0.08, w: slideW * 0.88, h: slideH * 0.18 };
|
|
}
|
|
if (type === 'subTitle') {
|
|
return { x: slideW * 0.15, y: slideH * 0.58, w: slideW * 0.7, h: slideH * 0.2 };
|
|
}
|
|
if (['body', 'obj', 'content'].includes(type)) {
|
|
return { x: slideW * 0.07, y: slideH * 0.26, w: slideW * 0.86, h: slideH * 0.6 };
|
|
}
|
|
return null;
|
|
};
|
|
|
|
const placeholderFontSize = (ph: { type: string; idx: string } | null) => {
|
|
const type = normalizePlaceholderType(ph?.type ?? '');
|
|
if (type === 'title') return 34;
|
|
if (type === 'subTitle') return 22;
|
|
return 16;
|
|
};
|
|
|
|
const paragraphAlign = (
|
|
para: Element,
|
|
ph: { type: string; idx: string } | null
|
|
): CanvasTextAlign => {
|
|
const align = para.getElementsByTagName('a:pPr')[0]?.getAttribute('algn');
|
|
if (align === 'ctr') return 'center';
|
|
if (align === 'r') return 'right';
|
|
|
|
const type = normalizePlaceholderType(ph?.type ?? '');
|
|
if (type === 'title' || type === 'subTitle') return 'center';
|
|
return 'left';
|
|
};
|
|
|
|
const schemeColor = (val: string | null) => {
|
|
switch (val) {
|
|
case 'bg1':
|
|
case 'lt1':
|
|
return '#ffffff';
|
|
case 'tx1':
|
|
case 'dk1':
|
|
return '#000000';
|
|
case 'accent1':
|
|
return '#4472c4';
|
|
case 'accent2':
|
|
return '#ed7d31';
|
|
case 'accent3':
|
|
return '#a5a5a5';
|
|
case 'accent4':
|
|
return '#ffc000';
|
|
case 'accent5':
|
|
return '#5b9bd5';
|
|
case 'accent6':
|
|
return '#70ad47';
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
const solidFillColor = (el: Element | Document | null): string | null => {
|
|
if (!el) return null;
|
|
const fill = el.getElementsByTagName('a:solidFill')[0];
|
|
if (!fill) return null;
|
|
|
|
const srgb = fill.getElementsByTagName('a:srgbClr')[0];
|
|
const srgbVal = srgb?.getAttribute('val');
|
|
if (srgbVal) return `#${srgbVal}`;
|
|
|
|
const scheme = fill.getElementsByTagName('a:schemeClr')[0];
|
|
return schemeColor(scheme?.getAttribute('val') ?? null);
|
|
};
|
|
|
|
const renderBackground = (
|
|
ctx: CanvasRenderingContext2D,
|
|
doc: Document,
|
|
slideW: number,
|
|
slideH: number
|
|
) => {
|
|
const bgColor = solidFillColor(doc.getElementsByTagName('p:bg')[0]);
|
|
if (!bgColor) return;
|
|
ctx.fillStyle = bgColor;
|
|
ctx.fillRect(0, 0, slideW, slideH);
|
|
};
|
|
|
|
const fontString = ({ italic, bold, fontPt }: Pick<TextToken, 'italic' | 'bold' | 'fontPt'>) =>
|
|
`${italic ? 'italic ' : ''}${bold ? 'bold ' : ''}${fontPt}pt Calibri, Arial, sans-serif`;
|
|
|
|
const readRunStyle = (run: Element, defaultFontSize: number) => {
|
|
const rPr = run.getElementsByTagName('a:rPr')[0];
|
|
let fontPt = defaultFontSize;
|
|
let bold = false;
|
|
let italic = false;
|
|
let color = '#000000';
|
|
|
|
if (rPr) {
|
|
if (rPr.getAttribute('b') === '1') bold = true;
|
|
if (rPr.getAttribute('i') === '1') italic = true;
|
|
const sz = rPr.getAttribute('sz');
|
|
if (sz) fontPt = parseInt(sz, 10) / 100;
|
|
color = solidFillColor(rPr) ?? color;
|
|
}
|
|
|
|
return { fontPt, bold, italic, color };
|
|
};
|
|
|
|
const drawTextLine = (
|
|
ctx: CanvasRenderingContext2D,
|
|
line: TextToken[],
|
|
align: CanvasTextAlign,
|
|
x: number,
|
|
y: number,
|
|
w: number
|
|
) => {
|
|
const lineWidth = line.reduce((sum, token) => sum + token.width, 0);
|
|
let cursorX = x + 4;
|
|
if (align === 'center') cursorX = x + Math.max(0, (w - lineWidth) / 2);
|
|
if (align === 'right') cursorX = x + w - lineWidth - 4;
|
|
|
|
for (const token of line) {
|
|
ctx.font = fontString(token);
|
|
ctx.fillStyle = token.color;
|
|
ctx.fillText(token.text, cursorX, y);
|
|
cursorX += token.width;
|
|
}
|
|
};
|
|
|
|
/** Load a data URI into an Image element and wait for it. */
|
|
const loadImage = (src: string): Promise<HTMLImageElement> =>
|
|
new Promise((resolve, reject) => {
|
|
const img = new Image();
|
|
img.onload = () => resolve(img);
|
|
img.onerror = () => reject(new Error('Failed to load image'));
|
|
img.src = src;
|
|
});
|
|
|
|
/**
|
|
* Convert PPTX ArrayBuffer → array of PNG data URL strings, one per slide.
|
|
*/
|
|
export async function pptxToImages(
|
|
buffer: ArrayBuffer
|
|
): Promise<{ images: string[]; width: number; height: number }> {
|
|
const JSZip = (await import('jszip')).default;
|
|
const zip = (await JSZip.loadAsync(buffer)) as ZipLike;
|
|
|
|
// ── Read slide dimensions from presentation.xml ──────────────────
|
|
let slideW = 960;
|
|
let slideH = 540;
|
|
const presXml = zip.file('ppt/presentation.xml');
|
|
if (presXml) {
|
|
const presText = await presXml.async('text');
|
|
const presDoc = new DOMParser().parseFromString(presText, 'application/xml');
|
|
const sldSz = presDoc.getElementsByTagName('p:sldSz')[0];
|
|
if (sldSz) {
|
|
slideW = emuToPx(parseEmu(sldSz.getAttribute('cx')));
|
|
slideH = emuToPx(parseEmu(sldSz.getAttribute('cy')));
|
|
}
|
|
}
|
|
|
|
// ── Collect media files (images) as base64 data URIs ─────────────
|
|
const media: Record<string, string> = {};
|
|
const mediaFiles = Object.keys(zip.files).filter((f) => f.startsWith('ppt/media/'));
|
|
await Promise.all(
|
|
mediaFiles.map(async (path) => {
|
|
const file = zip.file(path);
|
|
if (!file) return;
|
|
const base64 = await file.async('base64');
|
|
const ext = path.split('.').pop()?.toLowerCase() ?? '';
|
|
const mime =
|
|
ext === 'png'
|
|
? 'image/png'
|
|
: ext === 'gif'
|
|
? 'image/gif'
|
|
: ext === 'svg'
|
|
? 'image/svg+xml'
|
|
: ext === 'emf' || ext === 'wmf'
|
|
? 'image/x-emf'
|
|
: 'image/jpeg';
|
|
media[path] = `data:${mime};base64,${base64}`;
|
|
})
|
|
);
|
|
|
|
// ── Discover slide files ─────────────────────────────────────────
|
|
const slideFiles = Object.keys(zip.files)
|
|
.filter((f) => /^ppt\/slides\/slide\d+\.xml$/.test(f))
|
|
.sort((a, b) => {
|
|
const na = parseInt(a.match(/slide(\d+)/)?.[1] ?? '0');
|
|
const nb = parseInt(b.match(/slide(\d+)/)?.[1] ?? '0');
|
|
return na - nb;
|
|
});
|
|
|
|
const images: string[] = [];
|
|
|
|
for (const slidePath of slideFiles) {
|
|
const slideText = await zip.file(slidePath)!.async('text');
|
|
const slideDoc = new DOMParser().parseFromString(slideText, 'application/xml');
|
|
|
|
const rels = await readRels(zip, slidePath);
|
|
const layoutPath = getRelationshipTarget(rels, '/slideLayout');
|
|
const layoutDoc = layoutPath ? await readXml(zip, layoutPath) : null;
|
|
const layoutRels = layoutPath ? await readRels(zip, layoutPath) : {};
|
|
const masterPath = getRelationshipTarget(layoutRels, '/slideMaster');
|
|
const masterDoc = masterPath ? await readXml(zip, masterPath) : null;
|
|
const placeholderSources = [collectPlaceholders(layoutDoc), collectPlaceholders(masterDoc)];
|
|
|
|
// ── Create canvas and render slide ───────────────────────────
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = slideW;
|
|
canvas.height = slideH;
|
|
const ctx = canvas.getContext('2d')!;
|
|
|
|
ctx.fillStyle = '#ffffff';
|
|
ctx.fillRect(0, 0, slideW, slideH);
|
|
if (masterDoc) renderBackground(ctx, masterDoc, slideW, slideH);
|
|
if (layoutDoc) renderBackground(ctx, layoutDoc, slideW, slideH);
|
|
renderBackground(ctx, slideDoc, slideW, slideH);
|
|
|
|
const spTree = slideDoc.getElementsByTagName('p:spTree')[0];
|
|
if (!spTree) {
|
|
images.push(canvas.toDataURL('image/png'));
|
|
continue;
|
|
}
|
|
|
|
const shapes = Array.from(spTree.children).filter((el) =>
|
|
['sp', 'pic'].includes(getTag(el) ?? '')
|
|
);
|
|
|
|
for (const shape of shapes) {
|
|
const ph = getPlaceholder(shape);
|
|
const placeholder = findPlaceholder(ph, placeholderSources);
|
|
const rect =
|
|
parseXfrm(shape) ?? placeholder?.rect ?? fallbackPlaceholderRect(ph, slideW, slideH);
|
|
if (!rect) continue;
|
|
|
|
const { x, y, w, h } = rect;
|
|
if (w === 0 && h === 0) continue;
|
|
|
|
if (getTag(shape) === 'sp') {
|
|
const shapeFill = solidFillColor(shape.getElementsByTagName('p:spPr')[0]);
|
|
if (shapeFill) {
|
|
ctx.fillStyle = shapeFill;
|
|
ctx.fillRect(x, y, w, h);
|
|
}
|
|
}
|
|
|
|
// ── Picture ──────────────────────────────────────────────
|
|
const blipFill = shape.getElementsByTagName('p:blipFill')[0];
|
|
if (blipFill) {
|
|
const blip = blipFill.getElementsByTagName('a:blip')[0];
|
|
if (blip) {
|
|
const rEmbed = blip.getAttribute('r:embed') ?? '';
|
|
const mediaPath = rels[rEmbed]?.target;
|
|
const dataUri = mediaPath ? media[mediaPath] : '';
|
|
if (dataUri && !dataUri.includes('image/x-emf')) {
|
|
try {
|
|
const img = await loadImage(dataUri);
|
|
ctx.drawImage(img, x, y, w, h);
|
|
} catch {
|
|
// Skip images that fail to load
|
|
}
|
|
}
|
|
}
|
|
continue;
|
|
}
|
|
|
|
// ── Text shape ───────────────────────────────────────────
|
|
const txBody = shape.getElementsByTagName('p:txBody')[0];
|
|
if (!txBody) continue;
|
|
|
|
ctx.save();
|
|
ctx.rect(x, y, w, h);
|
|
ctx.clip();
|
|
|
|
const paragraphs = txBody.getElementsByTagName('a:p');
|
|
let cursorY = y;
|
|
const defaultFontSize = placeholderFontSize(ph ?? placeholder ?? null);
|
|
|
|
for (let pi = 0; pi < paragraphs.length; pi++) {
|
|
const para = paragraphs[pi];
|
|
const runs = para.getElementsByTagName('a:r');
|
|
const align = paragraphAlign(para, ph ?? placeholder ?? null);
|
|
|
|
if (runs.length === 0) {
|
|
cursorY += defaultFontSize * 1.5;
|
|
continue;
|
|
}
|
|
|
|
// Calculate max font size in this paragraph for line height
|
|
let maxFontPt = defaultFontSize;
|
|
for (let ri = 0; ri < runs.length; ri++) {
|
|
const rPr = runs[ri].getElementsByTagName('a:rPr')[0];
|
|
if (rPr) {
|
|
const sz = rPr.getAttribute('sz');
|
|
if (sz) {
|
|
const pt = parseInt(sz, 10) / 100;
|
|
if (pt > maxFontPt) maxFontPt = pt;
|
|
}
|
|
}
|
|
}
|
|
|
|
const lineHeight = maxFontPt * 1.4;
|
|
cursorY += maxFontPt; // baseline offset
|
|
|
|
let line: TextToken[] = [];
|
|
let lineWidth = 0;
|
|
const flushLine = () => {
|
|
if (line.length === 0) return;
|
|
if (cursorY <= y + h) {
|
|
drawTextLine(ctx, line, align, x, cursorY, w);
|
|
}
|
|
line = [];
|
|
lineWidth = 0;
|
|
cursorY += lineHeight;
|
|
};
|
|
|
|
for (let ri = 0; ri < runs.length; ri++) {
|
|
const run = runs[ri];
|
|
const text = run.getElementsByTagName('a:t')[0]?.textContent ?? '';
|
|
if (!text) continue;
|
|
|
|
const style = readRunStyle(run, defaultFontSize);
|
|
ctx.font = fontString(style);
|
|
|
|
ctx.textBaseline = 'alphabetic';
|
|
|
|
// Simple word-wrap within the shape bounds
|
|
const words = text.split(/(\n|[^\S\n]+)/);
|
|
for (const word of words) {
|
|
if (word === '') continue;
|
|
if (word === '\n') {
|
|
flushLine();
|
|
continue;
|
|
}
|
|
if (cursorY > y + h) break;
|
|
|
|
const width = ctx.measureText(word).width;
|
|
if (lineWidth + width > w - 8 && line.length > 0) {
|
|
flushLine();
|
|
if (word.trim() === '') continue;
|
|
}
|
|
if (line.length === 0 && word.trim() === '') continue;
|
|
|
|
line.push({ ...style, text: word, width });
|
|
lineWidth += width;
|
|
}
|
|
}
|
|
|
|
flushLine();
|
|
cursorY -= lineHeight * 0.6; // paragraph spacing
|
|
}
|
|
|
|
ctx.restore();
|
|
}
|
|
|
|
images.push(canvas.toDataURL('image/png'));
|
|
}
|
|
|
|
return { images, width: slideW, height: slideH };
|
|
}
|