nzambello/resize-img-api
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

add preview with try now

Browse source
This commit is contained in:
Nicola Zambello 2024-03-25 11:31:12 +02:00
parent d35821b915
commit 574168ad92
Signed by: nzambello
GPG key ID: 56E4A92C2C1E50BA
2 changed files with 81 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -22,7 +22,7 @@ Then call the API as, for example:
/api/imgresize/200/200/https%3A%2F%2Fmemori.ai%2Flogo.png /api/imgresize/200/200/https%3A%2F%2Fmemori.ai%2Flogo.png
``` ```
You can also specify a format using the querystring `?format=` and indicating one of the following: avif, gif, heif, jpeg, jpg, jp2, pdf, png, svg, tiff, webp. You can also specify a format using the querystring `?format=` and indicating one of the following: `avif`, `gif`, `heif`, `jpeg`, `jpg`, `pdf`, `png`, `svg`, `tiff`, `webp`. (Note: Experimental!)
## Docker ## Docker

91
index.ts
View file

@ -23,24 +23,72 @@ const homepage = html`
<body> <body>
<main class="container"> <main class="container">
<h1>Resize images API</h1> <h1>Resize images API</h1>
<nav style="justify-content: center; max-width: 800px; margin-left: auto; margin-right: auto;">
<a href="#try-now">Try now</a>
<span style="margin-left: 1rem; margin-right: 1rem;"> | </span>
<a href="#docs">Docs</a>
</nav>
<style> <style>
h1 { h1 {
margin-top: 2rem; margin-top: 2rem;
margin-bottom: 3rem; margin-bottom: 1rem;
text-align: center; text-align: center;
} }
h1 + nav {
margin-bottom: 3rem;
}
</style> </style>
<article style="max-width: 600px; margin-left: auto; margin-right: auto; padding: 3rem 2rem;"> <article style="max-width: 800px; margin-left: auto; margin-right: auto; padding: 3rem 2rem;">
<p>The structure of the API path is:</p> <h2 id="try-now">Try now</h2>
<p><pre>/api/imgresize/:width/:height/:url</pre></p> <form action="/api/preview" method="post" target="_blank">
<p>Where <code>width</code> and <code>height</code> can be numbers in pixels or <code>auto</code>.</p> <fieldset>
<p>The URL should be URL encoded, which can be done in JS with <code>encodeURIComponent</code>. See <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent" target="_blank" rel="noopener noreferrer">MDN ref</a>.</p> <label>
<p>Example for <a href="https://memori.ai/logo.png" target="_blank" rel="noopener noreferrer">https://memori.ai/logo.png</a>:</p> URL
<p><pre>https%3A%2F%2Fmemori.ai%2Flogo.png</pre></p> <input
<p>Then call the API as, for example:</p> type="url"
<p><pre>/api/imgresize/200/200/https%3A%2F%2Fmemori.ai%2Flogo.png</pre></p> name="url"
<p>You can also specify a format using the querystring <code>?format=</code> and indicating one of the following: avif, gif, heif, jpeg, jpg, jp2, pdf, png, svg, tiff, webp.</p> placeholder="https://example.com"
required
/>
</label>
<label>
Width
<input
type="number"
name="width"
placeholder="200"
min="1"
max="2000"
steps="1"
/>
</label>
<label>
Height
<input
type="number"
name="height"
placeholder="200"
min="1"
max="2000"
steps="1"
/>
</label>
</fieldset>
<button type="submit">Resize</button>
</form>
</article>
<article style="max-width: 800px; margin-left: auto; margin-right: auto; padding: 3rem 2rem;">
<h2 id="docs">Docs</h2>
<p>The structure of the API path is:</p>
<p><pre>/api/imgresize/:width/:height/:url</pre></p>
<p>Where <code>width</code> and <code>height</code> can be numbers in pixels or <code>auto</code>.</p>
<p>The URL should be URL encoded, which can be done in JS with <code>encodeURIComponent</code>. See <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent" target="_blank" rel="noopener noreferrer">MDN ref</a>.</p>
<p>Example for <a href="https://memori.ai/logo.png" target="_blank" rel="noopener noreferrer">https://memori.ai/logo.png</a>:</p>
<p><pre>https%3A%2F%2Fmemori.ai%2Flogo.png</pre></p>
<p>Then call the API as, for example:</p>
<p><pre>/api/imgresize/200/200/https%3A%2F%2Fmemori.ai%2Flogo.png</pre></p>
<p>You can also specify a format using the querystring <code>?format=</code> and indicating one of the following: avif, gif, heif, jpeg, jpg, jp2, pdf, png, svg, tiff, webp. Note: Experimental!</p>
</article> </article>
</main> </main>
</body> </body>
@ -57,6 +105,27 @@ app.get("/", (c) => {
return c.html(homepage); return c.html(homepage);
}); });
app.post("/api/preview", async (c) => {
const body = await c.req.parseBody();
c.header("Cache-Control", "s-maxage=31536000, stale-while-revalidate");
const url = body["url"];
if (!url || typeof url !== "string") {
c.status(400);
return c.json({ error: "No URL provided" });
}
const width = body["width"];
const height = body["height"];
const w = width && width !== "auto" ? Number(width) : 200;
const h = height && height !== "auto" ? Number(height) : 200;
return c.redirect(`/api/imgresize/${w}/${h}/${encodeURIComponent(url)}`);
});
app.get("/api/imgresize/:width/:height/:url", async (c) => { app.get("/api/imgresize/:width/:height/:url", async (c) => {
const { width, height, url } = c.req.param(); const { width, height, url } = c.req.param();
const format = c.req.query("format"); const format = c.req.query("format");