diff --git a/packages/presentation/src/components/FilePreview.svelte b/packages/presentation/src/components/FilePreview.svelte index 96d3eee38e..5c988b3c99 100644 --- a/packages/presentation/src/components/FilePreview.svelte +++ b/packages/presentation/src/components/FilePreview.svelte @@ -27,6 +27,7 @@ import { getFileUrl } from '../file' import { getPreviewType, previewTypes } from '../filetypes' + import { imageSizeToRatio } from '../image' import { BlobMetadata, FilePreviewExtension } from '../types' export let file: Ref @@ -68,8 +69,8 @@ return } const pR: number = mD?.pixelRatio ?? 1 - const fWidth: number = mD.originalWidth / pR - const fHeight: number = mD.originalHeight / pR + const fWidth: number = imageSizeToRatio(mD.originalWidth, pR) + const fHeight: number = imageSizeToRatio(mD.originalHeight, pR) let mHeight: number = 0 let scale: number = 1 if (fWidth > pWidth) { diff --git a/packages/presentation/src/image.ts b/packages/presentation/src/image.ts index cda525b48e..d5ff35337b 100644 --- a/packages/presentation/src/image.ts +++ b/packages/presentation/src/image.ts @@ -15,6 +15,11 @@ import extract from 'png-chunks-extract' +export function imageSizeToRatio (width: number, pixelRatio: number): number { + // consider pixel ratio < 2 as non retina and display them in original size + return pixelRatio < 2 ? width : Math.round(width / pixelRatio) +} + export async function getImageSize (file: Blob): Promise<{ width: number, height: number, pixelRatio: number }> { const size = isPng(file) ? await getPngImageSize(file) : undefined @@ -65,20 +70,18 @@ async function getPngImageSize (file: Blob): Promise<{ width: number, height: nu const idhrData = parseIHDR(new DataView(iHDRChunk.data.buffer)) const physData = parsePhys(new DataView(pHYsChunk.data.buffer)) - if (physData.unit === 0 && physData.ppux === physData.ppuy) { - const pixelRatio = Math.round(physData.ppux / 2834.5) - return { - width: idhrData.width, - height: idhrData.height, - pixelRatio - } + // Assuming pixels are square + // http://www.libpng.org/pub/png/spec/1.2/PNG-Decoders.html#D.Pixel-dimensions + const pixelRatio = Math.round(physData.ppux * 0.0254) / 72 + return { + width: idhrData.width, + height: idhrData.height, + pixelRatio } } catch (err) { console.error(err) return undefined } - - return undefined } // See http://www.libpng.org/pub/png/spec/1.2/PNG-Chunks.html diff --git a/plugins/text-editor-resources/src/components/CollaborativeTextEditor.svelte b/plugins/text-editor-resources/src/components/CollaborativeTextEditor.svelte index 90eab040d5..304395eba2 100644 --- a/plugins/text-editor-resources/src/components/CollaborativeTextEditor.svelte +++ b/plugins/text-editor-resources/src/components/CollaborativeTextEditor.svelte @@ -17,7 +17,7 @@ -{#await p then blobRef} +{#await getBlobRef(value, name) then blobRef} {#if loading}