@cf-wam/photon
Photon library for Cloudflare workers, Next.js and Node.js.
Powered by @silvia-odwyer/photon
Forked at a2cefcb
Installation
Install the package by running the following command in terminal:
npm install @cf-wasm/photon
Usage
- Cloudflare workers:
import * as photon from "@cf-wasm/photon";
- Next.js (Webpack):
import * as photon from "@cf-wasm/photon/next";
- CJS (file base):
import * as photon from "@cf-wasm/photon/node";
Examples
Here are some examples in which image is being resized and converted to webp format:
Cloudflare Workers
If you are using Cloudflare Workers, you can use it as shown below:
import * as photon from "@cf-wasm/photon";
export type Env = Readonly<{}>;
const workers: ExportedHandler<Env> = {
async fetch() {
const imageUrl = "https://avatars.githubusercontent.com/u/314135";
const inputBytes = await fetch(imageUrl)
.then((res) => res.arrayBuffer())
.then((buffer) => new Uint8Array(buffer));
const inputImage = photon.PhotonImage.new_from_byteslice(inputBytes);
const outputImage = photon.resize(
inputImage,
inputImage.get_width() * 0.5,
inputImage.get_height() * 0.5,
1
);
const outputBytes = outputImage.get_bytes_webp();
inputImage.free();
outputImage.free();
return new Response(outputBytes, {
headers: {
"Content-Type": "image/webp"
}
});
}
};
export default workers;
Next.js (App Router)
If you are using Next.js (App router) with edge runtime, you can use it as shown below:
import { type NextRequest } from "next/server";
import * as photon from "@cf-wasm/photon/next";
export const runtime = "edge";
export async function GET(request: NextRequest) {
const imageUrl = "https://avatars.githubusercontent.com/u/314135";
const inputBytes = await fetch(imageUrl)
.then((res) => res.arrayBuffer())
.then((buffer) => new Uint8Array(buffer));
const inputImage = photon.PhotonImage.new_from_byteslice(inputBytes);
const outputImage = photon.resize(
inputImage,
inputImage.get_width() * 0.5,
inputImage.get_height() * 0.5,
1
);
const outputBytes = outputImage.get_bytes_webp();
inputImage.free();
outputImage.free();
return new Response(outputBytes, {
headers: {
"Content-Type": "image/webp"
}
});
}
Next.js (Pages Router)
If you are using Next.js (Pages router) with edge runtime, you can use it as shown below:
import { type NextRequest } from "next/server";
import * as photon from "@cf-wasm/photon/next";
export const config = {
runtime: "edge",
unstable_allowDynamic: ["**/node_modules/@cf-wasm/photon/**/*.js"]
};
export default async function handler(req: NextRequest) {
const imageUrl = "https://avatars.githubusercontent.com/u/314135";
const inputBytes = await fetch(imageUrl)
.then((res) => res.arrayBuffer())
.then((buffer) => new Uint8Array(buffer));
const inputImage = photon.PhotonImage.new_from_byteslice(inputBytes);
const outputImage = photon.resize(
inputImage,
inputImage.get_width() * 0.5,
inputImage.get_height() * 0.5,
1
);
const outputBytes = outputImage.get_bytes_webp();
inputImage.free();
outputImage.free();
return new Response(outputBytes, {
headers: {
"Content-Type": "image/webp"
}
});
}
Documentation
To explore all the functions, view the official documentation.