Val Town Code SearchReturn to Val Town

1import { ImageMagick, initializeImageMagick, MagickGeometry } from "https://deno.land/x/imagemagick_deno@0.0.14/mod.ts";
2
3export async function modifyImage(
4  file: File,
5  params: { width: number; height: number },
6) {
7  const imageBuffer = new Uint8Array(await file.arrayBuffer());
8  const sizingData = new MagickGeometry(
9    params.width,
12  sizingData.ignoreAspectRatio = params.height > 0 && params.width > 0;
13  return new Promise<File>((resolve) => {
14    ImageMagick.read(imageBuffer, (image) => {
15      image.resize(sizingData);
16      image.write((data) => resolve(new File([data], file.name, { type: file.type })));
17    });
18  });

1Code from https://deno.com/blog/build-image-resizing-api
2
3Useful for compressing an image before sending to chatgpt4v, for example

1import { ImageMagick, initializeImageMagick, MagickGeometry } from "https://deno.land/x/imagemagick_deno@0.0.14/mod.ts";
2
3export async function modifyImage(
4  file: File,
5  params: { width: number; height: number },
6) {
7  const imageBuffer = new Uint8Array(await file.arrayBuffer());
8  const sizingData = new MagickGeometry(
9    params.width,
12  sizingData.ignoreAspectRatio = params.height > 0 && params.width > 0;
13  return new Promise<File>((resolve) => {
14    ImageMagick.read(imageBuffer, (image) => {
15      image.resize(sizingData);
16      image.write((data) => resolve(new File([data], file.name, { type: file.type })));
17    });
18  });

1Ever wonder how GitHub generates their images when you share a repo on social media?
2
3In this example we're using satori and a Deno-friendly SVG WASM creating an OpenGraph image dynamically. E.g. this image can be used when sharing a website, and it'll show up in iMessage or Twitter / other socials.
4
5Generated images are cached in Valtown's Blob system.
6
7To check metatags, you can use https://metatags.io/?url=https://yawnxyz-og.web.val.run

114      "src": "https://maxm-imggenurl.web.val.run/ios-app-icon-192x192",
115      "sizes": "192x192",
116      "type": "image/png"
117    },
118    {
119      "src": "https://maxm-imggenurl.web.val.run/ios-app-icon-512x512",
120      "sizes": "512x512",
121      "type": "image/png"
122    }
123  ]

11      </div>
12      <div className="card-body">
13        {content.cover_image && (
14          <img src={content.cover_image} alt={content.title} className="cover-image" />
15        )}
16        <p className="id"><strong>ID:</strong> {content.id}</p>
247}
248
249.cover-image {
250  width: 100%;
251  height: 200px;

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![b7321ca2cd80899250589b9aa08bc3cae9c7cea276282561194e7fc537259b46.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/311a81bb-18d8-4583-b7e3-64bac326f700/public)
6
7## Installation

1Code from https://deno.com/blog/build-image-resizing-api
2
3Useful for compressing an image before sending to chatgpt4v, for example

1import { ImageMagick, initializeImageMagick, MagickGeometry } from "https://deno.land/x/imagemagick_deno@0.0.14/mod.ts";
2
3export async function modifyImage(
4  file: File,
5  params: { width: number; height: number },
6) {
7  const imageBuffer = new Uint8Array(await file.arrayBuffer());
8  const sizingData = new MagickGeometry(
9    params.width,
12  sizingData.ignoreAspectRatio = params.height > 0 && params.width > 0;
13  return new Promise<File>((resolve) => {
14    ImageMagick.read(imageBuffer, (image) => {
15      image.resize(sizingData);
16      image.write((data) => resolve(new File([data], file.name, { type: file.type })));
17    });
18  });

3This Todo App is server rendered *and* client-hydrated React. This architecture is a lightweight alternative to NextJS, RemixJS, or other React metaframeworks with no compile or build step. The data is saved server-side in [Val Town SQLite](https://docs.val.town/std/sqlite/).
4
5![demo](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3bbc3a39-9017-4a95-797b-2f205aa57f00/public)
6
7## SSR React Mini Framework