@cf-wasm/ png (帮助)

一个简单的Cloudflare Workers, Next.js和Node的png编码器/解码器模块.

电源 齿轮/齿轮。 。 。 .

安装

npm install @cf-wasm/png       # npm
yarn add @cf-wasm/png          # yarn
pnpm add @cf-wasm/png          # pnpm

使用量

因为 package.json 包括: node, (中文(简体) ), workerd,以及 edge-light,通常可以直接从 @cf-wasm/png 让运行时间选择正确的入站点 :

import { encode } from "@cf-wasm/png";

如果您想要明确, 请从子模块导入 :

• Cloudflare Workers / Pages (Wrangler): 云花工/页面(英语:

  import { encode } from "@cf-wasm/png/workerd";
  

• Next.js Edge 运行时间 :

  import { encode } from "@cf-wasm/png/edge-light";
  

• 节点.js(内含):

  import { encode } from "@cf-wasm/png/node";
  

API 密码

编码

这个 encode 函数编码输入 Uint8Array 以 PNG 格式表示图像.

const encode: (
  image: Uint8Array,
  width: number,
  height: number,
  options?: EncodeOptions,
) => Uint8Array;

解码

这个 decode 函数解码输入 Uint8Array 代表 PNG 图像 .

const decode: (image: Uint8Array) => {
  image: Uint8Array;
  width: number;
  height: number;
  colorType: number;
  bitDepth: number;
  lineSize: number;
};

实例

以下是使用此库的一些实例.

云花岗工人

使用Cloudflare Workers的,可以使用如下: 1

// src/index.ts
import { PhotonImage, SamplingFilter, resize } from "@cf-wasm/photon/workerd";
import { encode } from "@cf-wasm/png/workerd";

export default {
  async fetch() {
    // url of image to fetch
    const imageUrl = "https://avatars.githubusercontent.com/u/314135";

    // fetch image and get the Uint8Array instance
    const inputBytes = await fetch(imageUrl)
      .then((res) => res.arrayBuffer())
      .then((buffer) => new Uint8Array(buffer));

    // create a PhotonImage instance
    const inputImage = PhotonImage.new_from_byteslice(inputBytes);

    // resize image using photon
    const outputImage = resize(
      inputImage,
      inputImage.get_width() * 0.5,
      inputImage.get_height() * 0.5,
      SamplingFilter.Nearest,
    );

    // encode using png
    const outputBytes = encode(
      outputImage.get_raw_pixels(),
      outputImage.get_width(),
      outputImage.get_height(),
    );

    // call free() method to free memory
    inputImage.free();
    outputImage.free();

    // return the Response instance
    return new Response(outputBytes, {
      headers: {
        "Content-Type": "image/png",
      },
    });
  },
} satisfies ExportedHandler;

Next.js (App路由器) (英语)

如果您正在使用 Next.js (App 路由器) 的边缘运行时间,您可以使用如下:

// (src/)app/api/image/route.ts
import { type NextRequest } from "next/server";
import {
  PhotonImage,
  SamplingFilter,
  resize,
} from "@cf-wasm/photon/edge-light";
import { encode } from "@cf-wasm/png/edge-light";

export const runtime = "edge";

export async function GET(request: NextRequest) {
  // url of image to fetch
  const imageUrl = "https://avatars.githubusercontent.com/u/314135";

  // fetch image and get the Uint8Array instance
  const inputBytes = await fetch(imageUrl)
    .then((res) => res.arrayBuffer())
    .then((buffer) => new Uint8Array(buffer));

  // create a PhotonImage instance
  const inputImage = PhotonImage.new_from_byteslice(inputBytes);

  // resize image using photon
  const outputImage = resize(
    inputImage,
    inputImage.get_width() * 0.5,
    inputImage.get_height() * 0.5,
    SamplingFilter.Nearest,
  );

  // encode using png
  const outputBytes = encode(
    outputImage.get_raw_pixels(),
    outputImage.get_width(),
    outputImage.get_height(),
  );

  // call free() method to free memory
  inputImage.free();
  outputImage.free();

  // return the Response instance
  return new Response(outputBytes, {
    headers: {
      "Content-Type": "image/png",
    },
  });
}

Next.js (页路由器)

如果您正在使用 Next.js (Pages 路由器) 的边缘运行时间,您可以使用如下:

// (src/)pages/api/image.ts
import { type NextRequest } from "next/server";
import {
  PhotonImage,
  SamplingFilter,
  resize,
} from "@cf-wasm/photon/edge-light";
import { encode } from "@cf-wasm/png/edge-light";

export const config = {
  runtime: "edge",
  // see https://nextjs.org/docs/messages/edge-dynamic-code-evaluation
  unstable_allowDynamic: ["**/node_modules/@cf-wasm/**/*.js"],
};

export default async function handler(req: NextRequest) {
  // url of image to fetch
  const imageUrl = "https://avatars.githubusercontent.com/u/314135";

  // fetch image and get the Uint8Array instance
  const inputBytes = await fetch(imageUrl)
    .then((res) => res.arrayBuffer())
    .then((buffer) => new Uint8Array(buffer));

  // create a PhotonImage instance
  const inputImage = PhotonImage.new_from_byteslice(inputBytes);

  // resize image using photon
  const outputImage = resize(
    inputImage,
    inputImage.get_width() * 0.5,
    inputImage.get_height() * 0.5,
    SamplingFilter.Nearest,
  );

  // encode using png
  const outputBytes = encode(
    outputImage.get_raw_pixels(),
    outputImage.get_width(),
    outputImage.get_height(),
  );

  // call free() method to free memory
  inputImage.free();
  outputImage.free();

  // return the Response instance
  return new Response(outputBytes, {
    headers: {
      "Content-Type": "image/png",
    },
  });
}

贷项

所有功劳都归于 齿轮/齿轮。 。 。 .