Upload Image

When building a full-stack application, many developers spend a surprising amount of time trying to make sure that the various services they use can communicate and interact with each other. Media-rich applications require image and video pipelines that can integrate seamlessly with the rest of your technology stack.With this in mind, we’re excited to introduce the Images binding, a way to connect the Images API directly to your Worker and enable new, programmatic workflows. The binding removes unnecessary friction from application development by allowing you to transform, overlay, and encode images within the Cloudflare Developer Platform ecosystem.In this post, we’ll explain how the Images binding works, as well as the decisions behind local development support. We’ll also walk through an example app that watermarks and encodes a user-uploaded image, then uploads the output directly to an R2 bucket. The challenges of fetch() Cloudflare Images was designed to help developers build scalable, cost-effective, and reliable image pipelines. You can deliver multiple copies of an image — each resized, manipulated, and encoded based on your needs. Only the original image needs to be stored; different versions are generated dynamically, or as requested by a user’s browser, then subsequently served from cache.With Images, you have the flexibility to transform images that are stored outside the Images product. Previously, the Images API was based on the fetch() method, which posed three challenges for developers:First, when transforming a remote image, the original image must be retrieved from a URL. This isn’t applicable for every scenario, like resizing and compressing images as users upload them from their local machine to your app. We wanted to extend the Images API to broader use cases where images might not be accessible from a URL.Second, the optimization operation — the changes you want to make to an image, like resizing it — is coupled with the delivery operation. If you wanted to crop an image, watermark it, then resize the watermarked image, then you’d need to serve one transformation to the browser, retrieve the output URL, and transform it again. This adds overhead to your code, and can be tedious and inefficient to maintain. Decoupling these operations means that you no longer need to manage multiple requests for consecutive transformations.Third, optimization parameters — the way that you specify how an image should be manipulated — follow a fixed order. For example, cropping is performed before resizing. It’s difficult to build a flow that doesn’t align with the established hierarchy — like resizing first, then cropping — without a lot of time, trial, and effort.But complex workflows shouldn’t require complex logic. In February, we released the Images binding in Workers to make the development experience more accessible, intuitive, and user-friendly. The binding helps you work more productively by simplifying how you connect the Images API to your Worker and providing more fine-grained control over how images are optimized. Extending the Images workflow Since optimization parameters follow a fixed order, we’d need to output the image to resize it after watermarking. The binding eliminates this step.Bindings connect your Workers to external resources on the Developer Platform, allowing you to manage interactions between services in a few lines of code. When you bind the Images API to your Worker, you can create more flexible, programmatic workflows to transform, resize, and encode your images — without requiring them to be accessible from a URL.Within a Worker, the Images binding supports the following functions:.transform(): Accepts optimization parameters that specify how an image should be manipulated.draw(): Overlays an image over the original image. The overlaid image can be optimized through a child transform() function..output(): Defines the output format for the transformed image..info(): Outputs information about the original image, like its format, file size, and dimensions. The life of a binding request At a high level, a binding works by establishing a communication channel between a Worker and the binding’s backend services.To do this, the Workers runtime needs to know exactly which objects to construct when the Worker is instantiated. Our control plane layer translates between a given Worker’s code and each binding’s backend services. When a developer runs wrangler deploy, any invoked bindings are converted into a dependency graph. This describes the objects and their dependencies that will be injected into the env of the Worker when it runs. Then, the runtime loads the graph, builds the objects, and runs the Worker.In most cases, the binding makes a remote procedure call to the backend services of the binding. The mechanism that makes this call must be constructed and injected into the binding object; for Images, this is implemented as a JavaScript wrapper object that makes HTTP calls to the Images API.These calls contain the sequence of operations that are required to build the final image, represented as a tree structure. Each .transform() function adds a new node to the tree, describing the operations that should be performed on the image. The .draw() function adds a subtree, where child .transform() functions create additional nodes that represent the operations required to build the overlay image. When .output() is called, the tree is flattened into a list of operations; this list, along with the input image itself, is sent to the backend of the Images binding.For example, let’s say we had the following commands: env.IMAGES.input(image) .transform(rotate:90}) .draw( env.IMAGES.input(watermark) .transform({width:32}) ) .transform({blur:5}) .output({format:"image/png"}) Put together, the request would look something like this: To communicate with the backend, we chose to send multipart forms. Each binding request is inherently expensive, as it can involve decoding, transforming, and encoding. Binary formats may offer slightly lower overhead per request, but given the bulk of the work in each request is the image processing itself, any gains would be nominal. Instead, we stuck with a well-supported, safe approach that our team had successfully implemented in the past. Meeting developers where they are Beyond the core capabilities of the binding, we knew that we needed to consider the entire developer lifecycle. The ability to test, debug, and iterate is a crucial part of the development process.Developers won’t use what they can’t test; they need to be able to validate exactly how image optimization will affect the user experience and performance of their application. That’s why we made the Images binding available in local development without incurring any usage charges.As we scoped out this feature, we reached a crossroad with how we wanted the binding to work when developing locally. At first, we considered making requests to our production backend services for both unit and end-to-end testing. This would require open-sourcing the components of the binding and building them for all Wrangler-supported platforms and Node versions.Instead, we focused our efforts on targeting individual use cases by providing two different methods. In Wrangler, Cloudflare’s command-line tool, developers can choose between an online and offline mode of the Images binding. The online mode makes requests to the real Images API; this requires Internet access and authentication to the Cloudflare API. Meanwhile, the offline mode requests a lower fidelity fake, which is a mock API implementation that supports a limited subset of features. This is primarily used for unit tests, as it doesn’t require Internet access or authentication. By default, wrangler dev uses the online mode, mirroring the same version that Cloudflare runs in production. See the binding in action Let’s look at an example app that transforms a user-uploaded image, then uploads it directly to an R2 bucket.To start, we created a Worker application and configured our wrangler.toml file to add the Images, R2, and assets bindings: [images] binding = "IMAGES" [[r2_buckets]] binding = "R2" bucket_name = "" [assets] directory = "./" binding = "ASSETS" In our Worker project, the assets directory contains the image that we want to use as our watermark.Our frontend has a `; export default { async fetch(request, env) { if (request.method === "GET") { return new Response(html, {headers:{'Content-Type':'text/html'},}) } if (request.method ==="POST") { // This is called when the user submits the form } } }; Next, we set up our Worker to handle the optimization.The user will upload images directly through the browser; since there isn’t an existing image URL, we won’t be able to use fetch() to get the uploaded image. Instead, we can transform the uploaded image directly, operating on its body as a stream of bytes.Once we read the image, we can manipulate the image. Here, we apply our watermark and encode the image to AVIF before uploading the transformed image to our R2 bucket: var __defProp = Object.defineProperty; var __name = (target, value) => __defProp(target, "name", { value, configurable: true }); function assetUrl(request, path) { const url = new URL(request.url); url.pathname = path; return url; } __name(assetUrl, "assetUrl"); export default { async fetch(request, env) { if (request.method === "GET") { return new Response(html, {headers:{'Content-Type':'text/html'},}) } if (request.method === "POST") { try { // Parse form data const formData = await request.formData(); const file = formData.get("image"); if (!file || typeof file.arrayBuffer !== "function") { return new Response("No image file provided", { status: 400 }); } // Read uploaded image as array buffer const fileBuffer = await file.arrayBuffer(); // Fetch image as watermark let watermarkStream = (await env.ASSETS.fetch(assetUrl(request, "watermark.png"))).body; // Apply watermark and convert to AVIF const imageResponse = ( await env.IMAGES.input(fileBuffer) // Draw the watermark on top of the image .draw( env.IMAGES.input(watermarkStream) .transform({ width: 100, height: 100 }), { bottom: 10, right: 10, opacity: 0.75 } ) // Output the final image as AVIF .output({ format: "image/avif" }) ).response(); // Add timestamp to file name const fileName = `image-${Date.now()}.avif`; // Upload to R2 await env.R2.put(fileName, imageResponse.body) return new Response(`Image uploaded successfully as ${fileName}`, { status: 200 }); } catch (err) { console.log(err.message) } } } }; We’ve also created a gallery in our documentation to demonstrate ways that you can use the Images binding. For example, you can transcode images from Workers AI or draw a watermark from KV on an image that is stored in R2.Looking ahead, the Images binding unlocks many exciting possibilities to seamlessly transform and manipulate images directly in Workers. We aim to create an even deeper connection between all the primitives that developers use to build AI and full-stack applications.Have some feedback for this release? Let us know in the Community forum.

Upload an image

ALL