# @cf-wasm/png 中文文档 规范地址：https://npmcn.com/package/%40cf-wasm/png/ 版本：0\.4\.0 npm 元数据更新时间：2026-08-01T02:29:47.841Z 中文译文更新时间：2026-11-09T08:30:36.888Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40cf-wasm/png 原文对照：https://npmcn.com/package/%40cf-wasm/png/?lang=original 项目主页：https://github.com/fineshopdesign/cf-wasm/tree/main/packages/png#readme 源码仓库：https://github.com/fineshopdesign/cf-wasm ## 关键信息（来自 npm 元数据） - 包体积（解压后）：636 kB，26 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - 运行依赖：0 个 - 首次发布：2023-11-22T09:20:55.846Z - 最新版本发布：2026-08-01T02:29:47.510Z - 近 30 天下载量：34161（2026-10-10 至 2026-11-08，npm 官方下载统计） - 已发布版本数：33（近 12 个月 7 个） ## 中文简介 云层工人简易的png编码器/解码器模块 ## 安装 ```sh npm install @cf-wasm/png ``` 也可以使用：`pnpm add @cf-wasm/png`、`yarn add @cf-wasm/png`、`bun add @cf-wasm/png` ## README # @cf-wasm/ png (帮助) 一个简单的Cloudflare Workers, Next.js和Node的png编码器/解码器模块. 电源 [齿轮/齿轮](https://github.com/denosaurs/pngs)。 。 。 . ## 安装 ```shell 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` 让运行时间选择正确的入站点 : ```ts import { encode } from "@cf-wasm/png"; ``` 如果您想要明确, 请从子模块导入 : - Cloudflare Workers / Pages (Wrangler): 云花工/页面(英语: ```ts import { encode } from "@cf-wasm/png/workerd"; ``` - Next.js Edge 运行时间 : ```ts import { encode } from "@cf-wasm/png/edge-light"; ``` - 节点.js(内含): ```ts import { encode } from "@cf-wasm/png/node"; ``` ## API 密码 ### 编码 这个 `encode` 函数编码输入 `Uint8Array` 以 PNG 格式表示图像. ```ts const encode: ( image: Uint8Array, width: number, height: number, options?: EncodeOptions, ) => Uint8Array; ``` ### 解码 这个 `decode` 函数解码输入 `Uint8Array` 代表 PNG 图像 . ```ts const decode: (image: Uint8Array) => { image: Uint8Array; width: number; height: number; colorType: number; bitDepth: number; lineSize: number; }; ``` ## 实例 以下是使用此库的一些实例. ### 云花岗工人 使用Cloudflare Workers的,可以使用如下: 1 ```ts // 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 路由器) 的边缘运行时间,您可以使用如下: ```ts // (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 路由器) 的边缘运行时间,您可以使用如下: ```ts // (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", }, }); } ``` ## 贷项 所有功劳都归于 [齿轮/齿轮](https://github.com/denosaurs/pngs)。 。 。 . ## 常见问题 ### @cf-wasm/png 是什么？ 云层工人简易的png编码器/解码器模块 ### 如何安装 @cf-wasm/png？ 在项目目录运行 npm install @cf-wasm/png，或使用 pnpm add / yarn add / bun add。 ### @cf-wasm/png 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @cf-wasm/png 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @cf-wasm/png 可以商用吗？ @cf-wasm/png 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @cf-wasm/png 的下载量有多少？ 根据 npm 官方下载统计，@cf-wasm/png 在 2026/10/10 – 2026/11/08 这 30 天内被下载 34,161 次，日均约 1,139 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @cf-wasm/png 还在维护吗？ 最新版本 0\.4\.0 发布于 2026/08/01（3 个月前）；至今共发布 33 个版本，其中过去 12 个月发布了 7 个；首次发布于 2023/11/22。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。