asset lod: fix high-res images (#4198)
Some checks are pending
Checks / Tests & checks (push) Waiting to run
Checks / Build all projects (push) Waiting to run
Deploy bemo / Deploy bemo to ${{ (github.ref == 'refs/heads/production' && 'production') || (github.ref == 'refs/heads/main' && 'staging') || 'preview' }} (push) Waiting to run
Deploy .com / Deploy dotcom to ${{ (github.ref == 'refs/heads/production' && 'production') || (github.ref == 'refs/heads/main' && 'staging') || 'preview' }} (push) Waiting to run
End to end tests / End to end tests (push) Waiting to run
Publish Canary Packages / Publish Canary Packages (push) Waiting to run
Publish VS Code Extension / Publish VS Code Extension (push) Waiting to run

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.
This commit is contained in:
Mime Čuvalo 2024-07-16 16:56:51 +01:00 committed by GitHub
parent 1a7f5e9fb5
commit 8aa4fd3352
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 3 additions and 3 deletions

View file

@ -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,

View file

@ -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<Blob> {
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)