cloudflare / cloudflare/workerd

🐛 Bug Report — Runtime APIs: Local image transform binding result does not play nice with `waitUntil`

Open
#5,537 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
C++
Stars
8.7k
Forks
739
Avg merge
2d 20h
Merged PRs (30d)
174

Description

Hi, I'm trying to use Image Transform binding to transform images then save it to cache using cache API and serve it to the user. My current code looks like this (using from Sveltekit):

```typescript
const imageURL = "Some URL"
const resp = await fetch(
imageURL,
{
cf: {
cacheTtl: 31536000
}
}
);

const cacheKey = 'someKey'

const transformedImage = (await platform!.env.IMAGES.input(resp.body!)
.transform({ width: 190, height: 250, fit: 'squeeze' })
.output({ format: 'image/webp' })).response()

const newResp = new Response(transformedImage.body, transformedImage);
newResp.headers.set('Cache-Control', 'public, max-age=31536000, immutable');
platform!.ctx.waitUntil(cache.put(cacheKey, newResp.clone()));
return newResp
```

Whenever I use waitUntil function to put the image into the cache, the image responded to the user is broken in half, like the buffer was unexpectedly exhausted, result a half finished image like this (Chrome tried to render the image but the binary is broken):

Image

To workaround this at local, instead of using `waitUntil`, I have to use the traditional `await` method to put the data into cache:

```typescript
await cache.put(cacheKey, newResp.clone())
return newResp
```

Oddly enough, this code is only broken in miniflare, but still works fine on the CF environment.

Could you guys check this out? Thank you!

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.