更新记录

1.0.0（2025-05-22） 下载此版本

PortraitBeautify 库更新日志

v1.0.0 (初始版本)

发布日期: 2025-05-22

主要功能

1. 核心美化功能

   • 基于先进计算机视觉算法的智能磨皮
   • 精确的肤色检测和处理
   • 基于人脸关键点的大眼效果
   • 自然的面部轮廓优化（瘦脸）
   • 智能美白功能，只处理皮肤区域

2. 滤镜系统

   • 多种预设滤镜：复古、LOMO、黑白、复古棕褐色、冷色调、阳光、怀旧、鲜艳、哑光
   • 自定义滤镜编辑器，支持调整亮度、对比度、饱和度等参数

3. 历史操作

   • 支持撤销和重做操作
   • 自动保存操作历史，方便用户尝试不同效果

4. 性能优化

   • 基于人像分割的精确处理，只对人脸区域应用效果
   • 优化算法，确保在移动设备上也能获得良好性能

技术亮点

• 整合 Face-API.js 进行人脸检测和关键点识别
• 使用 BodyPix 进行人像分割，实现精确的区域处理
• 优化的导向滤波算法实现自然的磨皮效果
• 基于面部几何特征的变形算法，确保大眼和瘦脸效果自然

示例项目

• 提供完整的 示例项目
• 包含用户友好的界面，支持图像上传、参数调整和结果下载
• 响应式设计，适配桌面和移动设备

兼容性

• 支持现代浏览器：Chrome、Firefox、Safari、Edge
• 支持移动端浏览器

已知问题

• 在某些低性能设备上，人脸检测和处理可能较慢
• 极端参数设置下，某些效果可能不够自然
• 滤镜效果在某些特殊图像上可能表现不佳

未来计划

• 添加更多高级滤镜效果
• 优化算法性能，特别是在移动设备上
• 增加更多精细控制选项，如局部调整功能
• 支持更多图像处理功能，如背景虚化、妆容叠加等

平台兼容性

PortraitBeautify 人像美化库

PortraitBeautify专为前端应用提供人像美化功能。它结合了本地视觉算法和图像处理技术，能够在浏览器中实时实现磨皮、美白、大眼、瘦脸等常见的人像美化效果，同时支持多种滤镜和历史操作功能。

主要特性

• 智能人像处理：基于人脸检测和关键点识别，精准定位面部特征
• 高级美化算法：提供磨皮、美白、大眼、瘦脸等专业级人像美化功能
• 丰富滤镜效果：内置多种流行滤镜，如复古、LOMO、黑白等
• 历史操作支持：支持撤销和重做，方便用户尝试不同效果
• 轻量级设计：优化的算法确保在移动设备上也能获得良好性能
• 模块化架构：易于集成到任何前端项目中

使用说明

安装

使用 npm 安装：

npm install

基本用法

import PortraitBeautify from '@/uni_modules/xian-Portrait-Beautify/js_sdk/index.js';

// 初始化库

const query = uni.createSelectorQuery();
query.select('#imageCanvas')
    .fields({
        node: true,
        size: true
    })
    .exec((res) => {
        if (!res || !res[0] || !res[0].node) {
            reject(new Error('无法获取canvas节点'));
            return;
        }
        const canvas = res[0].node;
        canvas.with = 800;
        canvas.height = 800
        const beautify = new PortraitBeautify(canvas);
        // 加载图像
        beautify.loadImage('path/to/your/image.jpg').then(() => {
          // 应用美化效果
          beautify.applyAllEffects({
            whitening: 0.5,      // 美白强度 (0-1)
            smoothing: 0.6,      // 磨皮强度 (0-1)
            eyeEnlargement: 0.3, // 大眼强度 (0-1)
            faceThinning: 0.4,   // 瘦脸强度 (0-1)
            filter: 'vintage',   // 滤镜类型
            filterIntensity: 0.7 // 滤镜强度 (0-1)
          });
        });
    });

高级用法

// 单独应用特定效果
beautify.skinSmoothing(0.8);  // 磨皮
beautify.whitening(0.6);      // 美白
beautify.enlargeEyes(0.5);    // 大眼
beautify.thinFace(0.4);       // 瘦脸
beautify.applyFilter('lomo'); // 应用滤镜

// 历史操作
if (beautify.canUndo()) {
  beautify.undo(); // 撤销上一步操作
}

if (beautify.canRedo()) {
  beautify.redo(); // 重做上一步操作
}

// 保存处理后的图像
const imageURL = beautify.getImageURL();

API 文档

构造函数

new PortraitBeautify(canvas: HTMLCanvasElement)

创建一个新的 PortraitBeautify 实例，需要传入一个 canvas 元素用于图像处理和显示。

主要方法

1. 加载图像

   loadImage(image: string | HTMLImageElement): Promise<void>

   加载图像进行处理。参数可以是图像 URL 或 HTMLImageElement 对象。

2. 应用所有美化效果

   applyAllEffects(options: {
    whitening?: number;         // 美白强度 (0-1)，默认 0
    smoothing?: number;         // 磨皮强度 (0-1)，默认 0
    eyeEnlargement?: number;    // 大眼强度 (0-1)，默认 0
    faceThinning?: number;      // 瘦脸强度 (0-1)，默认 0
    filter?: string;            // 滤镜类型，可选值见滤镜列表
    filterIntensity?: number;   // 滤镜强度 (0-1)，默认 1
   }): void

3. 单独效果方法

   skinSmoothing(intensity: number): void  // 磨皮
   whitening(intensity: number): void      // 美白
   enlargeEyes(intensity: number): void    // 大眼
   thinFace(intensity: number): void       // 瘦脸
   applyFilter(filterName: string, intensity?: number): void  // 应用滤镜
   editFilter(filterSettings: object, intensity?: number): void  // 自定义滤镜

4. 历史操作

   undo(): boolean         // 撤销上一步操作，返回是否成功
   redo(): boolean         // 重做上一步操作，返回是否成功
   canUndo(): boolean      // 检查是否可以撤销
   canRedo(): boolean      // 检查是否可以重做
   resetHistory(): void    // 重置历史记录

5. 其他方法

   updateCanvas(): void    // 更新画布显示
   reset(): void           // 重置所有效果，恢复原始图像
   getImageURL(type?: string, quality?: number): string  // 获取处理后的图像URL

预设滤镜

库中内置了多种预设滤镜，可以通过 applyFilter 方法应用：

• vintage: 复古
• lomo: LOMO
• blackAndWhite: 黑白
• sepia: 复古棕褐色
• cool: 冷色调
• sunny: 阳光
• nostalgic: 怀旧
• vibrant: 鲜艳
• matte: 哑光

自定义滤镜

可以使用 editFilter 方法创建自定义滤镜，支持以下参数：

beautify.editFilter({
  brightness: number;    // 亮度 (-1 到 1)
  contrast: number;      // 对比度 (0 到 2)
  saturation: number;    // 饱和度 (0 到 2)
  temperature: number;   // 色温 (-1 到 1)
  hue: number;           // 色调 (-1 到 1)
  warmth: number;        // 暖色调/冷色调 (-1 到 1)
});

示例项目

查看完整的示例项目。该示例展示了如何构建一个完整的人像美化应用，包括图像上传、参数调整和结果下载等功能。

兼容性

PortraitBeautify 支持现代浏览器，包括 Chrome、Firefox、Safari 和 Edge。需要注意的是，人脸检测和人像分割功能依赖于 TensorFlow.js，在一些较旧的浏览器中可能需要额外的 polyfill。

通过这个库，你可以轻松为你的应用添加人像美化功能，为用户提供出色的图像处理体验。