当前位置：首页 > news >正文

unfake.js API完全手册：在你的项目中集成专业级像素修复功能

news 2026/8/7 20:57:21

unfake.js API完全手册：在你的项目中集成专业级像素修复功能

【免费下载链接】unfake.jsFix AI pixel art and vector images right in your browser项目地址: https://gitcode.com/gh_mirrors/un/unfake.js

unfake.js是一款强大的开源工具，能够直接在浏览器中修复AI生成的像素艺术和矢量图像，为开发者提供专业级的图像处理能力。本文将详细介绍unfake.js的API接口，帮助你快速在项目中集成这一实用功能。

🌟 核心功能概览

unfake.js提供了丰富的图像处理功能，涵盖从像素检测到图像优化的完整流程。主要包括以下核心能力：

智能像素检测：自动识别图像中的像素尺寸和风格
图像修复优化：通过先进算法修复AI生成图像的瑕疵
色彩量化：精确控制图像色彩数量，保持视觉一致性
矢量转换：将像素图像高质量转换为矢量图形

图1：unfake.js像素修复前后对比，展示了对1024x1024像素图像的优化效果

🚀 快速开始

安装与引入

要在项目中使用unfake.js，首先需要克隆仓库：

git clone https://gitcode.com/gh_mirrors/un/unfake.js

然后在你的代码中引入核心模块：

import * as unfake from './browser-tool/lib/index.js';

基础使用示例

以下是一个简单的图像修复流程示例：

// 加载图像 const imgData = await unfake.utils.fileToImageData(file); // 检测最佳像素尺寸 const scale = await unfake.detectAuto(imgData); // 优化图像 const optimizedImg = await unfake.processImage({ imgData, scale, maxColors: 16 }); // 输出结果 const pngBytes = await unfake.utils.encodePng(optimizedImg);

📚 核心API详解

像素检测模块

unfake.js提供了多种像素检测算法，位于browser-tool/lib/pixel.js中：

`detectAuto(imgData)`

自动检测图像的最佳像素尺寸，返回缩放比例。

`runsBasedDetect(imgData)`

基于像素运行长度的检测算法，适合具有明显块状结构的图像。

`edgeAwareDetect(imgData)`

边缘感知检测算法，能够识别复杂边缘和细节丰富的图像。

图像处理模块

图像处理核心功能位于browser-tool/lib/core-client.js和browser-tool/vendor/unfake-core/unfake_wasm.js：

`processImage(options)`

一站式图像处理函数，接受多种参数控制处理流程：

imgData: 输入图像数据
scale: 像素缩放比例
maxColors: 最大色彩数量
morphology: 是否应用形态学优化

图2：unfake.js矢量转换功能展示，将像素图像转换为高质量矢量图形

`downscaleByDominantColor(imgData, scale, threshold)`

基于主色的降采样算法，保留图像主要特征的同时减小尺寸。

色彩处理模块

色彩处理功能位于browser-tool/lib/utils.js：

`detectOptimalColorCount(imgData, options)`

分析图像并确定最佳色彩数量，帮助优化图像质量和文件大小。

`quantizeImage(imgData, maxColors, fixedPalette)`

将图像量化为指定数量的颜色，可使用自定义调色板。

矢量转换模块

矢量转换功能位于browser-tool/lib/vector.js：

`vectorizeImage(options)`

将像素图像转换为矢量图形，支持多种参数控制转换质量和风格。

💡 高级应用技巧

批量处理图像

结合JavaScript的异步特性，可以轻松实现图像批量处理：

async function batchProcessImages(files) { const results = []; for (const file of files) { const imgData = await unfake.utils.fileToImageData(file); const scale = await unfake.detectAuto(imgData); const optimizedImg = await unfake.processImage({ imgData, scale }); results.push(optimizedImg); } return results; }

自定义处理流程

unfake.js的模块化设计允许你构建自定义处理流程：

async function customImagePipeline(imgData) { // 1. 检测边缘 const edges = unfake.edgeDetect.singleRegionEdgeDetect(imgData); // 2. 清理噪点 const cleaned = unfake.utils.morphologicalCleanup(edges); // 3. 色彩量化 const quantized = await unfake.utils.quantizeImage(cleaned, 32); // 4. 栅格对齐 return unfake.cvfree.snapToGrid(quantized, 16); }