本地视觉算法的美颜滤镜解决方案

更新记录

1.2.0（2025-05-27）下载此版本

PortraitBeautify 库更新日志

v1.2.0

发布日期: 2025-05-27

新增功能

高级编辑
- 新增头发变色，需要自行下载发型分割模型
- 新增画风风格迁移，如卡通、素描、油画，梵高等
- 新增年龄性别转换

优化

优化了人像分割算法，提高了分割的准确性和速度。
优化了磨皮算法，使皮肤处理更加自然。
优化了滤镜效果，使图像更加生动。

bug修复

修复了在部分场景下，背景虚化效果不理想的问题。
优化了光线平衡功能，提高了在低光环境下的效果。
修复人像分割错误
修复模块冲突问题

1.1.0（2025-05-23）下载此版本

PortraitBeautify 库更新日志

v1.1.0

发布日期: 2025-05-22

新增功能

面部彩妆功能
- 实现口红效果applyLipstick，基于人脸关键点定位嘴唇区域，支持自定义颜色和强度，使用掩码技术精确控制颜色应用范围。
- 优化腮红算法，通过改进位置计算、添加高斯渐变效果、增加肤色感知应用，使腮红效果更精准自然；同时支持位置微调、动态区域大小调整。
- 新增眼影效果applyEyeshadow，定位眼部区域并创建掩码，支持多种颜色和强度调整，自然融合原始肤色。
智能场景识别
- 新增场景检测功能_detectScene，通过分析图像亮度和饱和度，自动识别晴天、室内、夜景等场景类型，并将结果存储在sceneType属性中。
- 实现背景虚化功能applyBackgroundBlur，基于人像分割结果区分前景和背景，对背景区域应用高斯模糊，支持调整虚化强度。
- 加入光线平衡功能balanceLighting，根据场景类型自动调整亮度和对比度，在低光环境中提高亮度，强光环境中降低对比度。
算法升级
- 改进_createAreaMask算法，使用Gift Wrapping算法计算凸包、扫描线填充技术，并针对复杂区域优化，提升口红、眼影等彩妆效果的准确性。
- 优化眼部掩码创建算法_createEyeMask，基于眼部关键点计算精确区域，扩大边界并使用射线法判断点是否在轮廓内。
高级美颜调整
- 鼻梁增高enhanceNoseBridge，局部变形算法增强鼻梁立体感。
- 下巴调整adjustChin，调整下巴形状和长度。
- 眉毛调整adjustEyebrows，改变眉毛形状和浓密度。

优化与改进

对整体代码结构进行梳理，提取公共方法，增强代码的复用性和可维护性。
部分算法增加边界条件处理和异常情况捕获，提高程序鲁棒性，例如处理少于3个点的区域、水平边和共线点等特殊情况。

Bug修复

修复了在某些图像尺寸下，人脸关键点定位偏差导致的彩妆效果错位问题。
解决了场景检测中，部分边缘情况导致场景误判的问题。

已知问题

人像分割需要在线下载模型，模型存于外网，有时候会下载失败。

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

PortraitBeautify 库更新日志

v1.0.0 (初始版本)

发布日期: 2025-05-22

主要功能

核心美化功能
- 基于先进计算机视觉算法的智能磨皮
- 精确的肤色检测和处理
- 基于人脸关键点的大眼效果
- 自然的面部轮廓优化（瘦脸）
- 智能美白功能，只处理皮肤区域
滤镜系统
- 多种预设滤镜：复古、LOMO、黑白、复古棕褐色、冷色调、阳光、怀旧、鲜艳、哑光
- 自定义滤镜编辑器，支持调整亮度、对比度、饱和度等参数
历史操作
- 支持撤销和重做操作
- 自动保存操作历史，方便用户尝试不同效果
性能优化
- 基于人像分割的精确处理，只对人脸区域应用效果
- 优化算法，确保在移动设备上也能获得良好性能

技术亮点

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

示例项目

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

兼容性

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

已知问题

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

未来计划

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

平台兼容性

uni-app

Vue2	Vue3	Chrome	Safari	app-vue	app-nvue	Android	iOS	鸿蒙
√	√	√	√	×	×	-	-	-

微信小程序	支付宝小程序	抖音小程序	百度小程序	快手小程序	京东小程序	鸿蒙元服务	QQ小程序	飞书小程序	快应用-华为	快应用-联盟
×	×	×	×	×	×	-	×	×	×	×

其他

多语言	暗黑模式	宽屏模式
×	×	√

PortraitBeautify 人像美化库

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

主要特性

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

使用说明

tips:单独使用插件时，需要将static目录下的所有模型文件放入项目根目录下的static文件夹中，并确保在页面中正确引用。

安装

在插件根目录使用 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) {
            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'); // 应用滤镜

//参数：强度（0-1），控制鼻梁变窄的程度
//效果：通过调整鼻梁宽度增强立体感，自然提升面部轮廓
// 增强鼻梁立体感
beautify.enhanceNoseBridge(0.6);

//下巴调整 (adjustChin)
//参数：
//长度（0-1）：控制下巴伸长或缩短
//宽度（0-1）：控制下巴变窄或变宽
//效果：可实现尖下巴、圆下巴等多种效果，适应不同审美需求
beautify.adjustChin(0.7, 0.3);

//眉毛调整 (adjustEyebrows)
//参数：
//形状（0-1）：从平眉到挑眉的调整
//浓密度（0-1）：控制眉毛深浅
//效果：可实现多种眉形变化，无需额外图像资源
beautify.adjustEyebrows(0.8, 0.7);

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

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

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

API 文档

构造函数

new PortraitBeautify(canvas: HTMLCanvasElement)

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

主要方法

加载图像
```
loadImage(image: string | HTMLImageElement): Promise<void>
```
加载图像进行处理。参数可以是图像 URL 或 HTMLImageElement 对象。

应用所有美化效果

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

单独效果方法

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  // 自定义滤镜

历史操作

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

其他方法

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

滤镜效果

// 应用预设滤镜
beautify.applyFilter(filterName: string, intensity?: number);

// 自定义滤镜
beautify.editFilter(filterSettings: object, intensity?: number);

// 可用的预设滤镜
// 'vintage': 复古
// 'lomo': LOMO
// 'blackAndWhite': 黑白
// 'sepia': 复古棕褐色
// 'cool': 冷色调
// 'sunny': 阳光
// 'nostalgic': 怀旧
// 'vibrant': 鲜艳
// 'matte': 哑光
// 'leica': 徕卡风格
// 'hasselblad': 哈苏风格
// 'fujiProvia': 富士 Provia 风格
// 'fujiVelvia': 富士 Velvia 风格
// 'fujiClassicChrome': 富士 Classic Chrome 风格
// 'kodakPortra': 柯达 Portra 风格
// 'polaroid': 宝丽来风格

历史操作

// 撤销上一步操作
beautify.undo();

// 重做上一步操作
beautify.redo();

// 检查是否可以撤销
beautify.canUndo();

// 检查是否可以重做
beautify.canRedo();

// 重置历史记录
beautify.resetHistory();

高级功能

面部彩妆功能

// 口红效果
beautify.applyLipstick(color: string, intensity?: number);

// 腮红效果
beautify.applyBlush(color: string, intensity?: number, positionAdjustment?: { x: number, y: number });

// 眼影效果
beautify.applyEyeshadow(color: string, intensity?: number);

智能场景识别

// 背景虚化
beautify.applyBackgroundBlur(intensity?: number);

// 光线平衡
beautify.balanceLighting(intensity?: number);

滤镜配置

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

// 徕卡风格
beautify.applyFilter('leica', 0.8);

// 哈苏风格
beautify.applyFilter('hasselblad', 0.7);

// 富士 Provia 风格
beautify.applyFilter('fujiProvia', 0.6);

// 富士 Velvia 风格
beautify.applyFilter('fujiVelvia', 0.9);

// 富士 Classic Chrome 风格
beautify.applyFilter('fujiClassicChrome', 0.5);

// 柯达 Portra 风格
beautify.applyFilter('kodakPortra', 0.7);

// 宝丽来风格
beautify.applyFilter('polaroid', 0.8);

自定义滤镜

可以使用 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)
  clarity: number;       // 清晰度 (0 到 2)
  sharpness: number;     // 锐度 (0 到 2)
  vibrance: number;      // 活力 (0 到 2)
  highlights: number;    // 高光调整 (0 到 1)
  vignette: number;      // 暗角效果 (0 到 1)
});

示例项目

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

兼容性

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

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