PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

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

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/tldraw/src/lib/Tldraw.tsx
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. // We put these hooks into a component here so that they can run inside of the context provided by TldrawEditor and TldrawUi.
function InsideOfEditorAndUiContext({ function InsideOfEditorAndUiContext({
maxImageDimension = 1000, maxImageDimension = 5000,
maxAssetSize = 10 * 1024 * 1024, // 10mb maxAssetSize = 10 * 1024 * 1024, // 10mb
acceptedImageMimeTypes = DEFAULT_SUPPORTED_IMAGE_TYPES, acceptedImageMimeTypes = DEFAULT_SUPPORTED_IMAGE_TYPES,
acceptedVideoMimeTypes = DEFAULT_SUPPORT_VIDEO_TYPES, acceptedVideoMimeTypes = DEFAULT_SUPPORT_VIDEO_TYPES,

4
packages/tldraw/src/lib/utils/assets/assets.ts
View file

@ -44,7 +44,7 @@ export function containBoxSize(
* ```ts * ```ts
* const image = await (await fetch('/image.jpg')).blob() * const image = await (await fetch('/image.jpg')).blob()
* const size = await getImageSize(image) * 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. * @param image - The image Blob.
@ -60,7 +60,7 @@ export async function downsizeImage(
opts = {} as { type?: string; quality?: number } opts = {} as { type?: string; quality?: number }
): Promise<Blob> { ): Promise<Blob> {
const image = await MediaHelpers.usingObjectURL(blob, MediaHelpers.loadImage) 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( const [desiredWidth, desiredHeight] = await clampToBrowserMaxCanvasSize(
Math.min(width * 2, image.naturalWidth), Math.min(width * 2, image.naturalWidth),
Math.min(height * 2, image.naturalHeight) Math.min(height * 2, image.naturalHeight)