From 8aa4fd33527a4809370f8d25134f28ec7a43e928 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mime=20=C4=8Cuvalo?= Date: Tue, 16 Jul 2024 16:56:51 +0100 Subject: [PATCH] asset lod: fix high-res images (#4198) high-res images are busted currently, we weren't doing `Math.min` before https://github.com/tldraw/tldraw/pull/4069 and now it's limited by the natural width of the image which is actually at odds with what's been uploaded. ## for separate PR ...actually, now that i think about it, this code isn't doing any resizing anymore - the server has the high-res images but we're only recording it as a smaller image: ``` if (isFinite(maxImageDimension)) { const resizedSize = containBoxSize(size, { w: maxImageDimension, h: maxImageDimension }) if (size !== resizedSize && MediaHelpers.isStaticImageType(file.type)) { size = resizedSize } } ``` ### Change type - [x] `bugfix` - [ ] `improvement` - [ ] `feature` - [ ] `api` - [ ] `other` ### Release notes - Images LOD: fix high-res images. --- packages/tldraw/src/lib/Tldraw.tsx | 2 +- packages/tldraw/src/lib/utils/assets/assets.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/tldraw/src/lib/Tldraw.tsx b/packages/tldraw/src/lib/Tldraw.tsx index 4a7dc3ca2..fbd145022 100644 --- a/packages/tldraw/src/lib/Tldraw.tsx +++ b/packages/tldraw/src/lib/Tldraw.tsx @@ -137,7 +137,7 @@ export function Tldraw(props: TldrawProps) { // We put these hooks into a component here so that they can run inside of the context provided by TldrawEditor and TldrawUi. function InsideOfEditorAndUiContext({ - maxImageDimension = 1000, + maxImageDimension = 5000, maxAssetSize = 10 * 1024 * 1024, // 10mb acceptedImageMimeTypes = DEFAULT_SUPPORTED_IMAGE_TYPES, acceptedVideoMimeTypes = DEFAULT_SUPPORT_VIDEO_TYPES, diff --git a/packages/tldraw/src/lib/utils/assets/assets.ts b/packages/tldraw/src/lib/utils/assets/assets.ts index a3a557466..b53e565e7 100644 --- a/packages/tldraw/src/lib/utils/assets/assets.ts +++ b/packages/tldraw/src/lib/utils/assets/assets.ts @@ -44,7 +44,7 @@ export function containBoxSize( * ```ts * const image = await (await fetch('/image.jpg')).blob() * const size = await getImageSize(image) - * const resizedImage = await downsizeImage(image, size.w / 2, size.h / 2, { type: "image/jpeg", quality: 0.92 }) + * const resizedImage = await downsizeImage(image, size.w / 2, size.h / 2, { type: "image/jpeg", quality: 0.85 }) * ``` * * @param image - The image Blob. @@ -60,7 +60,7 @@ export async function downsizeImage( opts = {} as { type?: string; quality?: number } ): Promise { const image = await MediaHelpers.usingObjectURL(blob, MediaHelpers.loadImage) - const { type = blob.type, quality = 0.92 } = opts + const { type = blob.type, quality = 0.85 } = opts const [desiredWidth, desiredHeight] = await clampToBrowserMaxCanvasSize( Math.min(width * 2, image.naturalWidth), Math.min(height * 2, image.naturalHeight)