1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
// 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 (
<div className="container">
<h1>Image Resizer</h1>
<form onSubmit={handleSubmit}>
<div className="form-group">
<label htmlFor="imageUrl">Image URL:</label>
<input
type="url"
id="imageUrl"
value={imageUrl}
onChange={(e) => setImageUrl(e.target.value)}
required
/>
</div>
<div className="form-group">
<label htmlFor="size">Size (e.g., 300x400):</label>
<input
type="text"
id="size"
value={size}
onChange={(e) => setSize(e.target.value)}
pattern="\d+x\d+"
required
/>
</div>
<button type="submit">Resize Image</button>
</form>
{resizedImageUrl && (
<div className="result">
<h2>Resized Image:</h2>
<img src={resizedImageUrl} alt="Resized" />
</div>
)}
<p className="footer">View source on <a href={import.meta.url.replace("esm.town", "val.town")}>Val Town</a></p>
</div>
);
}
function client() {
createRoot(document.getElementById("root")).render(<App />);
}
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<Response> {
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');