SkiaSharp + ViewFaceCore实战：手把手教你打造带标注保存功能的人脸识别Demo
SkiaSharp + ViewFaceCore实战：从零构建带多格式保存功能的人脸识别应用
当开发者需要将AI模型的识别结果直观呈现给用户时，图像标注技术往往成为关键环节。传统GDI+绘图在性能和跨平台支持上存在局限，而SkiaSharp作为Google Skia图形库的.NET封装，提供了更现代的解决方案。本文将带你用WinForms+SkiaSharp+ViewFaceCore构建一个完整的人脸识别标注系统，重点解决实际开发中的三大痛点：实时绘制性能、坐标转换精度和多格式保存兼容性。
1. 环境搭建与基础配置
1.1 创建项目与NuGet包安装
首先在Visual Studio中新建Windows窗体应用(.NET Framework)项目，建议选择.NET 6+版本以获得更好的SkiaSharp兼容性。通过NuGet包管理器安装以下关键组件：
Install-Package SkiaSharp -Version 2.88.3 Install-Package SkiaSharp.Views.WindowsForms -Version 2.88.3 Install-Package ViewFaceCore -Version 0.3.4关键依赖说明：
SkiaSharp：核心绘图库SkiaSharp.Views.WindowsForms：提供SKControl等WinForms集成组件ViewFaceCore：基于SeetaFace6的人脸识别引擎
1.2 界面布局设计
在Form设计器中添加以下控件：
SKControl- 命名为skCanvas，用于显示图像和标注Button- 命名为btnLoad，文本设为"加载图片"Button- 命名为btnDetect，文本设为"人脸检测"Button- 命名为btnSave，文本设为"保存结果"SaveFileDialog- 命名为saveFileDialog1
调整skCanvas的Dock属性为Fill，使其占据窗体主要区域。建议设置BackColor为ControlDark以便观察画布边界。
2. 核心功能实现
2.1 图像加载与显示
在Form类中添加私有字段存储图像数据：
private SKBitmap _originalBitmap; private float _scaleFactor = 1.0f;实现图片加载逻辑：
private void LoadImage(string filePath) { _originalBitmap?.Dispose(); _originalBitmap = SKBitmap.Decode(filePath); // 计算缩放比例以适应控件大小 _scaleFactor = Math.Min( (float)skCanvas.Width / _originalBitmap.Width, (float)skCanvas.Height / _originalBitmap.Height ); skCanvas.Invalidate(); // 触发重绘 }处理skCanvas的PaintSurface事件实现基础绘制：
private void SkCanvas_PaintSurface(object sender, SKPaintSurfaceEventArgs e) { var canvas = e.Surface.Canvas; canvas.Clear(SKColors.Transparent); if (_originalBitmap == null) return; // 计算居中显示位置 float x = (skCanvas.Width - _originalBitmap.Width * _scaleFactor) / 2; float y = (skCanvas.Height - _originalBitmap.Height * _scaleFactor) / 2; var destRect = new SKRect(x, y, x + _originalBitmap.Width * _scaleFactor, y + _originalBitmap.Height * _scaleFactor); canvas.DrawBitmap(_originalBitmap, destRect); }2.2 人脸检测与标注绘制
添加ViewFaceCore相关字段：
private readonly FaceDetector _detector = new FaceDetector(); private List<FaceInfo> _detectedFaces = new List<FaceInfo>();实现人脸检测方法：
private void DetectFaces() { if (_originalBitmap == null) return; using var imageData = _originalBitmap.ToFaceImage(); _detectedFaces = _detector.Detect(imageData); skCanvas.Invalidate(); }扩展PaintSurface事件处理，添加标注绘制逻辑：
// 在原有绘制代码后添加： if (_detectedFaces?.Count > 0) { using var paint = new SKPaint { Color = SKColors.Red, Style = SKPaintStyle.Stroke, StrokeWidth = 2, IsAntialias = true, TextSize = 24 }; for (int i = 0; i < _detectedFaces.Count; i++) { var face = _detectedFaces[i]; // 绘制人脸矩形 var rect = new SKRect( x + face.Location.X * _scaleFactor, y + face.Location.Y * _scaleFactor, x + (face.Location.X + face.Location.Width) * _scaleFactor, y + (face.Location.Y + face.Location.Height) * _scaleFactor); canvas.DrawRect(rect, paint); // 绘制人脸序号 canvas.DrawText( (i + 1).ToString(), rect.Left, rect.Top - 10, paint); // 绘制关键点 if (face.MarkPoints != null) { foreach (var point in face.MarkPoints) { canvas.DrawCircle( x + point.X * _scaleFactor, y + point.Y * _scaleFactor, 3 * _scaleFactor, paint); } } } }3. 图像保存功能进阶实现
3.1 多格式保存解决方案
原始方案中直接使用Encode方法存在格式限制问题。我们采用混合方案确保兼容性：
private void SaveAnnotatedImage(string filePath) { // 创建与原图同尺寸的SKBitmap using var resultBitmap = new SKBitmap(_originalBitmap.Width, _originalBitmap.Height); using var canvas = new SKCanvas(resultBitmap); // 绘制原始图像 canvas.DrawBitmap(_originalBitmap, 0, 0); // 绘制标注（使用1:1比例） if (_detectedFaces?.Count > 0) { using var paint = new SKPaint { /* 与之前相同的配置 */ }; foreach (var face in _detectedFaces) { // 绘制逻辑与之前类似，但不应用_scaleFactor // ... } } // 根据扩展名选择保存方式 var ext = Path.GetExtension(filePath).ToLower(); if (ext == ".png") { using var stream = File.OpenWrite(filePath); resultBitmap.Encode(stream, SKEncodedImageFormat.Png, 100); } else { // 转换为System.Drawing.Bitmap保存其他格式 var sysBitmap = resultBitmap.ToBitmap(); sysBitmap.Save(filePath, GetImageFormat(ext)); sysBitmap.Dispose(); } } private ImageFormat GetImageFormat(string extension) => extension switch { ".jpg" or ".jpeg" => ImageFormat.Jpeg, ".bmp" => ImageFormat.Bmp, ".gif" => ImageFormat.Gif, ".tiff" => ImageFormat.Tiff, _ => ImageFormat.Png };3.2 保存功能集成
为保存按钮添加事件处理：
private void BtnSave_Click(object sender, EventArgs e) { if (_originalBitmap == null) return; saveFileDialog1.Filter = "PNG 图像|*.png|JPEG 图像|*.jpg|位图|*.bmp"; if (saveFileDialog1.ShowDialog() == DialogResult.OK) { SaveAnnotatedImage(saveFileDialog1.FileName); MessageBox.Show("保存成功", "提示", MessageBoxButtons.OK); } }4. 性能优化与实用技巧
4.1 绘制性能提升
当处理高分辨率图像时，可采用以下优化策略：
// 在PaintSurface事件开始时添加： canvas.Save(); canvas.Scale(_scaleFactor); // 后续绘制使用原始坐标，无需手动计算缩放 // 在事件结束时添加： canvas.Restore();4.2 动态标注样式
通过扩展SKPaint配置实现更丰富的标注效果：
private SKPaint CreateAnnotationPaint(int index) { var colors = new[] { SKColors.Red, SKColors.Blue, SKColors.Green }; return new SKPaint { Color = colors[index % colors.Length], Style = SKPaintStyle.Stroke, StrokeWidth = 2, IsAntialias = true, TextSize = 24, Typeface = SKTypeface.FromFamilyName("Arial", SKFontStyle.Bold) }; }4.3 坐标转换工具方法
封装坐标转换逻辑提高代码可读性：
private SKPoint ConvertToCanvasCoords(float imageX, float imageY) { return new SKPoint( (skCanvas.Width - _originalBitmap.Width * _scaleFactor) / 2 + imageX * _scaleFactor, (skCanvas.Height - _originalBitmap.Height * _scaleFactor) / 2 + imageY * _scaleFactor ); }5. 错误处理与边界情况
5.1 资源释放管理
确保正确处理SKBitmap等非托管资源：
protected override void OnFormClosing(FormClosingEventArgs e) { _originalBitmap?.Dispose(); _detector?.Dispose(); base.OnFormClosing(e); }5.2 图像加载异常处理
增强图片加载的健壮性：
private void BtnLoad_Click(object sender, EventArgs e) { using var openDialog = new OpenFileDialog { Filter = "图像文件|*.jpg;*.png;*.bmp" }; if (openDialog.ShowDialog() == DialogResult.OK) { try { LoadImage(openDialog.FileName); } catch (Exception ex) { MessageBox.Show($"图片加载失败: {ex.Message}", "错误"); } } }5.3 空图像检测
在关键操作前添加空值检查：
private void BtnDetect_Click(object sender, EventArgs e) { if (_originalBitmap == null) { MessageBox.Show("请先加载图片", "提示"); return; } try { DetectFaces(); } catch (Exception ex) { MessageBox.Show($"人脸检测失败: {ex.Message}", "错误"); } }