Fix downscaling (#2325)

Fixes an issue where uploaded images could significantly increase the
document size. The problem was with calling `downscale` library, which
expect the type to be one of: `jpg`, `png`, `webp`. We were sending the
type with the `image/` prefix. Thanks to @irg1008 for pointing that out.

Test image:

![testImage](https://github.com/tldraw/tldraw/assets/2523721/b8df54ca-60f4-47a4-8b71-ca6ba6ca1935)

The difference I saw in testing:
![CleanShot 2023-12-15 at 10 34
56](https://github.com/tldraw/tldraw/assets/2523721/cf571ac9-4af0-4ac0-af3f-3dfbbe5cdd85)

@steveruizok why are we[ doubling the size
here](https://github.com/tldraw/tldraw/blob/main/packages/tldraw/src/lib/utils/assets/assets.ts#L61-L62)?
For retina quality?

Fixes https://github.com/tldraw/tldraw/issues/2320

### Change Type

- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

1. Use the supplied test image.
2. Add it to a tldraw document.
3. Save the file and check the file size. It should be significantly
lower than doing the same thing on tldraw.com

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Decrease the size of uploaded assets.
This commit is contained in:
Mitja Bezenšek 2023-12-15 18:13:36 +01:00 committed by GitHub
parent b133c59391
commit 0171d1498d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -82,7 +82,11 @@ export async function getResizedImageDataUrl(
desiredHeight *= ratio
}
return await downscale(dataURLForImage, desiredWidth, desiredHeight, { imageType: type, quality })
return await downscale(dataURLForImage, desiredWidth, desiredHeight, {
// downscale expects the type without the `image/` prefix
imageType: type.replace('image/', ''),
quality,
})
}
/** @public */