Image Resizer

\n \n {resizedImageUrl && (\n

Resized Image:

\n $\"Resized\"$ \n

\n )}\n

View source on Val Town

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

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