// This val creates an image resizing service using the Cloudinary API. // It provides a form for users to input the image URL and size, and displays the resized image. /** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [imageUrl, setImageUrl] = useState(""); const [size, setSize] = useState(""); const [resizedImageUrl, setResizedImageUrl] = useState(""); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); const response = await fetch(`?link=${encodeURIComponent(imageUrl)}&size=${size}`); try { if (response.ok) { const blob = await response.blob(); setResizedImageUrl(URL.createObjectURL(blob)); } else { const errorText = await response.text(); throw new Error(errorText); } } catch (error) { alert(`Error resizing image: ${error.message}`); console.error("Error details:", error); } }; return (

Image Resizer

{resizedImageUrl && (

Resized Image:

)}

View source on Val Town

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function testEndpoint() { const testImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/280px-PNG_transparency_demonstration_1.png"; const testSize = "100x100"; const cloudinaryUrl = `https://res.cloudinary.com/demo/image/fetch/c_fill,w_100,h_100/${encodeURIComponent(testImageUrl)}`; try { const response = await fetch(cloudinaryUrl); if (response.ok) { console.log("Test endpoint successful"); return "Test successful"; } else { throw new Error(`Failed to fetch image: ${response.status} ${response.statusText}`); } } catch (error) { console.error("Test endpoint failed:", error); return `Test failed: ${error.message}`; } } export default async function server(req: Request): Promise { const url = new URL(req.url); if (url.pathname === "/test") { const result = await testEndpoint(); return new Response(result); } const link = url.searchParams.get('link'); const size = url.searchParams.get('size'); if (!link || !size) { return new Response(` Image Resizer

`, { headers: { "Content-Type": "text/html" }, }); } const [width, height] = size.split("x"); if (!width || !height) { return new Response("Size should be in the format WIDTHxHEIGHT", { status: 400 }); } const cloudinaryUrl = `https://res.cloudinary.com/demo/image/fetch/c_fill,w_${width},h_${height}/${encodeURIComponent(link)}`; try { const imageResponse = await fetch(cloudinaryUrl); if (!imageResponse.ok) { throw new Error(`Failed to fetch image: ${imageResponse.status} ${imageResponse.statusText}`); } const contentType = imageResponse.headers.get("content-type"); return new Response(imageResponse.body, { headers: { "Content-Type": contentType || "image/jpeg", "Cache-Control": "public, max-age=31536000", }, }); } catch (error) { console.error("Error fetching or processing image:", error.message, error.stack); return new Response(`Error processing image: ${error.message}. Please ensure the image URL is correct and publicly accessible.`, { status: 500 }); } } const css = ` body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; max-width: 800px; margin: 0 auto; padding: 20px; } .container { background-color: #f4f4f4; border-radius: 5px; padding: 20px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } h1 { color: #2c3e50; } .form-group { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; } input[type="url"], input[type="text"] { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; } button { background-color: #3498db; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #2980b9; } .result { margin-top: 20px; } .result img { max-width: 100%; height: auto; border: 1px solid #ddd; border-radius: 4px; } .footer { margin-top: 20px; text-align: center; font-size: 0.9em; color: #777; } .footer a { color: #3498db; text-decoration: none; } .footer a:hover { text-decoration: underline; } `;

resizeImageError