diff --git a/src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/imagePDF.tsx b/src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/imagePDF.tsx index 1a3513cb..1471e933 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/imagePDF.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/imagePDF.tsx @@ -21,9 +21,6 @@ export const blockMappingImagePDF: DocsExporterPDF['mappings']['blockMapping'][' if (blob.type.includes('svg')) { const svgText = await blob.text(); - const FALLBACK_SIZE = 536; - previewWidth = previewWidth || FALLBACK_SIZE; - const result = await convertSvgToPng(svgText, previewWidth); pngConverted = result.png; dimensions = { width: result.width, height: result.height }; diff --git a/src/frontend/apps/impress/src/features/docs/doc-export/utils.ts b/src/frontend/apps/impress/src/features/docs/doc-export/utils.ts index 73e09c7d..cf7cc404 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-export/utils.ts +++ b/src/frontend/apps/impress/src/features/docs/doc-export/utils.ts @@ -36,7 +36,7 @@ export function downloadFile(blob: Blob, filename: string) { */ export async function convertSvgToPng( svgText: string, - width: number, + width?: number, ): Promise<{ png: string; width: number; height: number }> { // Create a canvas and render the SVG onto it const canvas = document.createElement('canvas'); @@ -54,26 +54,36 @@ export async function convertSvgToPng( const svgElement = svgDoc.documentElement; // Get viewBox or fallback to width/height attributes - let height; + let calculatedHeight: number | undefined; const svgWidth = svgElement.getAttribute?.('width'); const svgHeight = svgElement.getAttribute?.('height'); const viewBox = svgElement.getAttribute('viewBox')?.split(' ').map(Number); const originalWidth = svgWidth ? parseInt(svgWidth) : viewBox?.[2]; const originalHeight = svgHeight ? parseInt(svgHeight) : viewBox?.[3]; - if (originalWidth && originalHeight) { - const aspectRatio = originalHeight / originalWidth; - height = Math.round(width * aspectRatio); - } const svg = Canvg.fromString(ctx, svgText); - svg.resize(width, height, true); + + const FALLBACK_WIDTH = 536; + + // Resize if width provided, preserving aspect ratio + if (originalWidth && originalHeight && width) { + const aspectRatio = originalHeight / originalWidth; + calculatedHeight = Math.round(width * aspectRatio); + svg.resize(width, calculatedHeight, true); + } else if (!width && !originalWidth) { + svg.resize(FALLBACK_WIDTH, undefined, true); + } + await svg.render(); + const returnWidth = width || originalWidth || FALLBACK_WIDTH; + const returnHeight = calculatedHeight || returnWidth; + return { png: canvas.toDataURL('image/png'), - width, - height: height || width, + width: returnWidth, + height: returnHeight, }; }