Fresh Images

import { defineConfig } from "$fresh/server.ts";
import ImagesPlugin from "fresh_images/mod.ts";
import { resize, rotate } from "fresh_images/transformer.ts";

export default defineConfig({
  plugins: [
    ImagesPlugin({
      route: "/image",
      realPath: "./static/images",
      transformers: { resize, rotate },
    }),
  ],
});

import ImagesPlugin, {
  extendKeyMap,
  getParam,
  transform,
} from "fresh_images/mod.ts";
import { decode, type GIF, type Image } from "imagescript/mod.ts";

/**
 * Custom transformer example.
 * Rotate an image hue by a random number of degrees.
 * Optionally accept a query parameter to invert the hue.
 */
const myTransformer = async (img: Image | GIF, req: Request) => {
  const randomDegrees = Math.floor(Math.random() * 360);

  // Use `extendKeyMap` to lookup custom parameters
  const invert = getParam(req, "invert", extendKeyMap({ invert: "i" }));

  // Use the `transform` helper function to apply asynchronous transformations.
  // This ensures transformations will be applied to every frame of a GIF animation.
  if (invert) {
    img = await transform(img, (frame) => Promise.resolve((frame as Image).invertHue()));
  }

  return transform(
    img,
    (frame) => Promise.resolve((frame as Image).hueShift(randomDegrees)),
  );
};

export default defineConfig({
  plugins: [
    ImagesPlugin({
      transformers: {
        cool: myTransformer,
        withCustomRoute: {
          // Always applies this `handler` transformation to the route.
          // Uses same static image directory!
          path: "/desaturate",
          handler: (img: Image | GIF) =>
            transform(
              img,
              (img) => Promise.resolve((img as Image).saturation(0, true)),
            ),
        },
      },
    }),
});

export default defineConfig({
  plugins: [
    // This creates a route, "/images", that will serve images from the "./static/image" directory.
    ImagesPlugin(),
    // Create a different route to access another directory.
    ImagesPlugin({
      route: "/placeholder",
      realPath: "./static/placeholders",
      transformers: {
        // Only specified transformers will be available on this route.
      },
    }),
  ],
});

import type { ImagesPluginOptions } from "fresh_images/src/types.ts";
import ImagesPlugin, { transform } from "fresh_images/mod.ts";
import { ensureDir, join } from "$std/fs/mod.ts";
import { defineConfig } from "$fresh/server.ts";
import { decode, GIF, Image } from "imagescript/mod.ts";

/**
 * Pre-optimize images before serving them.
 */
const myBuildFunction: ImagesPluginOptions["build"] = async ({
  realPath,
}) => {
  const targetDir = realPath ?? "./static";
  const files = Deno.readDir("./static/image");

  await ensureDir(targetDir);

  // Resize all images in the directory
  for await (const file of files) {
    if (!file.isFile) {
      continue;
    }

    const input = await Deno.readFile(`./static/image/${file.name}`);

    const output = await transform(
      await decode(input),
      (img) => Promise.resolve((img as Image).resize(Image.RESIZE_AUTO, 100)),
    );

    // Encode at lowest quality

    if (output instanceof GIF) {
      await Deno.writeFile(
        join(targetDir, file.name),
        await output.encode(30),
      );
      continue;
    }

    await Deno.writeFile(
      join(targetDir, file.name),
      await output.encodeJPEG(1),
    );
  }
};

export default defineConfig({
  plugins: [
    ImagesPlugin({
      build: myBuildFunction,
    }),
  ],
});