[Images] Update example to use ES module syntax. (#16602)

* Doc: Update example to use ES module syntax.

https://developers.cloudflare.com/workers/reference/migrate-to-module-workers/

* Fix: Default export left out.

* Update src/content/docs/images/transform-images/transform-via-workers.mdx

---------

Co-authored-by: Kian <[email protected]>

Author: theTyster

src/content/docs/images/transform-images/transform-via-workers.mdx

@@ -205,67 +205,65 @@ if (response.ok || response.redirected) {
 Assuming you [set up a Worker](/workers/get-started/guide/) on `https://example.com/image-resizing` to handle URLs like `https://example.com/image-resizing?width=80&image=https://example.com/uploads/avatar1.jpg`:
 
 ```js
-addEventListener("fetch", event => {
-  event.respondWith(handleRequest(event.request))
-})
-
 /**
  * Fetch and log a request
  * @param {Request} request
  */
-async function handleRequest(request) {
-  // Parse request URL to get access to query string
-  let url = new URL(request.url)
-
-  // Cloudflare-specific options are in the cf object.
-  let options = { cf: { image: {} } }
-
-  // Copy parameters from query string to request options.
-  // You can implement various different parameters here.
-  if (url.searchParams.has("fit")) options.cf.image.fit = url.searchParams.get("fit")
-  if (url.searchParams.has("width")) options.cf.image.width = url.searchParams.get("width")
-  if (url.searchParams.has("height")) options.cf.image.height = url.searchParams.get("height")
-  if (url.searchParams.has("quality")) options.cf.image.quality = url.searchParams.get("quality")
-
-  // Your Worker is responsible for automatic format negotiation. Check the Accept header.
-  const accept = request.headers.get("Accept");
-  if (/image\/avif/.test(accept)) {
-    options.cf.image.format = 'avif';
-  } else if (/image\/webp/.test(accept)) {
-    options.cf.image.format = 'webp';
-  }
-
-  // Get URL of the original (full size) image to resize.
-  // You could adjust the URL here, e.g., prefix it with a fixed address of your server,
-  // so that user-visible URLs are shorter and cleaner.
-  const imageURL = url.searchParams.get("image")
-  if (!imageURL) return new Response('Missing "image" value', { status: 400 })
-
-  try {
-    // TODO: Customize validation logic
-    const { hostname, pathname } = new URL(imageURL)
-
-    // Optionally, only allow URLs with JPEG, PNG, GIF, or WebP file extensions
-    // @see https://developers.cloudflare.com/images/url-format#supported-formats-and-limitations
-    if (!/\.(jpe?g|png|gif|webp)$/i.test(pathname)) {
-      return new Response('Disallowed file extension', { status: 400 })
+export default {
+  async fetch(request) {
+    // Parse request URL to get access to query string
+    let url = new URL(request.url)
+
+    // Cloudflare-specific options are in the cf object.
+    let options = { cf: { image: {} } }
+
+    // Copy parameters from query string to request options.
+    // You can implement various different parameters here.
+    if (url.searchParams.has("fit")) options.cf.image.fit = url.searchParams.get("fit")
+    if (url.searchParams.has("width")) options.cf.image.width = url.searchParams.get("width")
+    if (url.searchParams.has("height")) options.cf.image.height = url.searchParams.get("height")
+    if (url.searchParams.has("quality")) options.cf.image.quality = url.searchParams.get("quality")
+
+    // Your Worker is responsible for automatic format negotiation. Check the Accept header.
+    const accept = request.headers.get("Accept");
+    if (/image\/avif/.test(accept)) {
+      options.cf.image.format = 'avif';
+    } else if (/image\/webp/.test(accept)) {
+      options.cf.image.format = 'webp';
     }
 
-    // Demo: Only accept "example.com" images
-    if (hostname !== 'example.com') {
-      return new Response('Must use "example.com" source images', { status: 403 })
+    // Get URL of the original (full size) image to resize.
+    // You could adjust the URL here, e.g., prefix it with a fixed address of your server,
+    // so that user-visible URLs are shorter and cleaner.
+    const imageURL = url.searchParams.get("image")
+    if (!imageURL) return new Response('Missing "image" value', { status: 400 })
+
+    try {
+      // TODO: Customize validation logic
+      const { hostname, pathname } = new URL(imageURL)
+
+      // Optionally, only allow URLs with JPEG, PNG, GIF, or WebP file extensions
+      // @see https://developers.cloudflare.com/images/url-format#supported-formats-and-limitations
+      if (!/\.(jpe?g|png|gif|webp)$/i.test(pathname)) {
+        return new Response('Disallowed file extension', { status: 400 })
+      }
+
+      // Demo: Only accept "example.com" images
+      if (hostname !== 'example.com') {
+        return new Response('Must use "example.com" source images', { status: 403 })
+      }
+    } catch (err) {
+      return new Response('Invalid "image" value', { status: 400 })
     }
-  } catch (err) {
-    return new Response('Invalid "image" value', { status: 400 })
-  }
 
-  // Build a request that passes through request headers
-  const imageRequest = new Request(imageURL, {
-    headers: request.headers
-  })
+    // Build a request that passes through request headers
+    const imageRequest = new Request(imageURL, {
+      headers: request.headers
+    })
 
-  // Returning fetch() with resizing options will pass through response with the resized image.
-  return fetch(imageRequest, options)
+    // Returning fetch() with resizing options will pass through response with the resized image.
+    return fetch(imageRequest, options)
+  }
 }
 ```