I’m trying really hard to use Workers to resize the images using GitHub - cloudflare/rustwasm-worker-template: A template for kick starting a Cloudflare Worker project using workers-rs. Write your Cloudflare Worker entirely in Rust!
I’m fighting with the Error 1101 for days not understanding what is the problem. Try loading:
Sample image. If you refresh the page 10 times you get the Error 1101. Funny enough if you open an incognito browser window, you can load the page again ( maximum 10 times ).
Can somebody help me understand what’s the problem?
I’ve done some load testing via curl requests and all is fine.
Here is the full code of my worker:
let removeHeaders = [
"x-bz-content-sha1",
"x-bz-file-id",
"x-bz-file-name",
"x-bz-info-src_last_modified_millis",
"x-bz-upload-timestamp"
]
async function fetchAndStream(request) {
// Fetch from origin server.
let response = await fetch(request)
let newHdrs = new Headers(response.headers)
removeHeaders.forEach(function(name){
newHdrs.delete(name)
})
// Create an identity TransformStream (a.k.a. a pipe).
// The readable side will become our new response body.
let { readable, writable } = new TransformStream()
// Start pumping the body. NOTE: No await!
response.body.pipeTo(writable)
// ... and deliver our Response while that's running.
return new Response(readable, {...response, headers: newHdrs})
}
// REQUIRED: When configuring this worker script, in the UI, go to the "resource" tab, create a
// new WebAssembly module resource, name it "RESIZER_WASM", and upload resizer.wasm.
// OR, upload via the API (see `upload` in Makefile).
// Instantiate the WebAssembly module with 32MB of memory.
const wasmMemory = new WebAssembly.Memory({initial: 512});
const wasmInstance = new WebAssembly.Instance(
// RESIZER_WASM is a global variable created through the Resource Bindings UI (or API).
RESIZER_WASM,
// This second parameter is the imports object. Our module imports its memory object (so that
// we can allocate it ourselves), but doesn't require any other imports.
{env: {memory: wasmMemory}})
// Define some shortcuts.
const resizer = wasmInstance.exports
const memoryBytes = new Uint8Array(wasmMemory.buffer)
// Now we can write our worker script.
addEventListener("fetch", event => {
event.respondWith(handle(event.request))
});
async function handle(request) {
// Forward the request to our origin.
let response = await fetch(request)
let newHdrs = new Headers(response.headers)
removeHeaders.forEach(function(name){
newHdrs.delete(name)
})
// Check if the response is an image. If not, we'll just return it.
let type = response.headers.get("Content-Type") || ""
if (!type.startsWith("image/")) return response
// Check if the `width` query parameter was specified in the URL. If not,
// don't resize -- just return the response directly.
let width = new URL(request.url).searchParams.get("width")
if (!width) return response
// OK, we're going to resize. First, read the image data into memory.
let bytes = new Uint8Array(await response.arrayBuffer())
// Call our WebAssembly module's init() function to allocate space for
// the image.
let ptr = resizer.init(bytes.length)
// Copy the image into WebAssembly memory.
memoryBytes.set(bytes, ptr)
// Call our WebAssembly module's resize() function to perform the resize.
let newSize = resizer.resize(bytes.length, parseInt(width))
if (newSize == 0) {
// Resizer didn't want to process this image, so just return it. Since
// we already read the response body, we need to reconstruct the
// response here from the bytes we read.
return new Response(bytes, response);
}
// Extract the result bytes from WebAssembly memory.
let resultBytes = memoryBytes.slice(ptr, ptr + newSize)
// Create a new response with the image bytes. Our resizer module always
// outputs JPEG regardless of input type, so change the header.
let newResponse = new Response(resultBytes, {...response, headers: newHdrs})
newResponse.headers.set("Content-Type", "image/jpeg")
// Return the response.
return newResponse
}
[/details]
