For Workes & Pages, what is the name of the domain?
n/a
What is the error number?
n/a
What is the error message?
n/a
What is the issue or error you’re encountering
We never figured out how to use the border attribute, let alone how to make border-radius when using url parameters or worker.
What are the steps to reproduce the issue?
We offer a programatic way for our customers to format their pictures in our platform. The way we do that is through Cloudflare image worker.
Here’s how a common image processing may look like:
We’ve been able to use most of the filters like that(even draw overlays ontop of other images).
However when it comes to the border filter we simply can’t make it work.
What we’re really interested in is how we could make border-radius on their images, like Cloudinary is offering:
Currently, Cloudflare Images doesn’t have out-of-the-box support for manipulating the border radius, but you might consider applying the CSS border-radius property when you render the HTML.
Threw together a quick example of how you’d do this with Workers.
This handles request URLs that follow this structure: [your-zone]/?image=[source-image-url]&border-radius=[value]
First, we check the URL for the border-radius query parameter. This example uses 0px as the default.
// Parse URL for query string
let url = new URL(request.url);
// Get border-radius
let borderRadius = url.searchParams.get("border-radius");
if (!borderRadius) {
borderRadius = '0px'; // Default value if border-radius is not provided
} else {
borderRadius += 'px'; // Append 'px'
}
Then, we render the HTML img element using the source image URL and apply the border-radius style based on the value in the request URL:
// Get source image
const imageURL = url.searchParams.get("image");
if (!imageURL) return new Response('Missing "image" value', { status: 400 });
// Render HTML and apply border-radius
const html = `
<!DOCTYPE html>
<html>
<body>
<img src="${imageURL}" style="border-radius: ${borderRadius}; max-width: 100%; height: auto;">
</body>
</html>
`;
For example, try sending this URL in the Workers Playground: /?image=https://upload.wikimedia.org/wikipedia/commons/f/fe/American_Eskimo_Dog_1.jpg&border-radius=50