Unity+OpenCV+Dlib实现换脸+图片生成+上传服务器+生成二维码

功能描述

一句话描述：让游客体验一下当宇航员的乐趣。
具体功能：游客通过摄像头拍照，生成有着“自己的脸”的宇航员的图片，然后展示二维码，供游客下载。

效果视频

实现思路

功能描述起来很简单，但是具体实现起来还是有一点难度的，最基本的问题就是，客户拍照离得远、离得近、拍摄角度不同，都需要完美的将脸“放到那个头盔里”，大小要合适，角度要合适，那么要想实现他：

• 其实就是原始的图像中有个原来的人脸，然后使用摄像头拍到的人脸进行脸部更换操作，然后生成图片，进行后续的操作。
• 至于换脸后脸部在头盔里面，是因为这是用了两张图，更换完的人脸图，其实是处于底层，然后在其上面又覆盖了一层带有Alpha通道（头盔的玻璃是透明的）的图。这两图叠加起来，就是最终的效果了。
• 生成图像后，上传到服务器，然后生成二维码。这里难点在于安全性，原因是游客没有身份认证过程，谁都可以拍照上传，那么也就是说，服务器的上传接口是开放的，如何确认上传数据的人是我的Unity客户端，而不是别人伪造的？这就是一个问题，假设有人伪造客户端，上传垃圾数据怎么办？？

开发中使用的技术栈

一、换脸

技术原理和步骤：
网上其实有很多换脸的原理和说明，大都是Python和C++的，Unity其实完全一样，只不过使用的插件是OpenCVForUnity，这里简要说一下基本的原理：

1. 使用OpenCV和Dlib检测人脸，确定目标图（原始图像中的人脸）和源图（摄像头拍到的人脸）中人脸的68个关键点位置。
2. 分别将两张图中68个关键点位进行三角化处理，即划分成一个一个的小三角形。
3. 根据目标图中每个三角形的位置和源图中对应的三角形的位置，计算出变换矩阵，然后针对三角形中的每个像素点进行变换操作，这样就可以把源图中的人脸对应变换到目标图中。
4. 根据目标图的颜色等融合一下，使得颜色相匹配。

示例代码：

由于目标图每次都是一样的，所以只在程序初始化时检测一次即可，这里是在Awke中进行的。

// 创建人脸检测器，使用插件中自带的训练好的模型数据
_faceLandmarkDetector =new FaceLandmarkDetector(DlibFaceLandmarkDetector.UnityUtils.Utils.getFilePath("DlibFaceLandmarkDetector/sp_human_face_68.dat"));// 从Unity的Texture2D纹理中创建目标图的Mat，注意：此纹理在Unity中需要勾选"Read/Write Enable"
_faceTargetMat = new Mat(_TargetFaceTex.height, _TargetFaceTex.width, CvType.CV_8UC4);
Utils.texture2DToMat(_TargetFaceTex, _faceTargetMat);// 先检测人脸的大体位置，获得包含人脸的范围矩形
OpenCVForUnityUtils.SetImage(_faceLandmarkDetector, _faceTargetMat);
var faceRect = _faceLandmarkDetector.Detect();// 因为目标图中肯定只有一个人脸，所以就是用faceRect[0]
if (faceRect is { Count: > 0 })_targetLandmarks = _faceLandmarkDetector.DetectLandmark(faceRect[0]);
elsethrow new Exception("原始纹理中，未检测到人脸");

当游客按下了拍照按钮，执行下面的代码：

private IEnumerator RealTakePhoto()
{// 如果摄像头未开始播放，就开始播放if(!_webCamTexture.isPlaying)_webCamTexture.Play();yield return null;// 开始倒计时float countdown = _CountDown;while (countdown > 0){_infoText.text = $"{countdown}";--countdown;yield return new WaitForSeconds(1f);}// 倒计时完成，等待摄像头完成渲染_webCamTexture.Pause();yield return new WaitForEndOfFrame();// 获取摄像头拍到的照片（源图）Texture2D photo = new Texture2D(_webCamTexture.width, _webCamTexture.height, TextureFormat.RGBA32, false);photo.SetPixels(_webCamTexture.GetPixels(0, 0, _webCamTexture.width, _webCamTexture.height));photo.Apply();// 照片转换成Mat，以便在OpenCV中使用using Mat photoMat = new Mat(photo.height, photo.width, CvType.CV_8UC4);Utils.texture2DToMat(photo, photoMat);// 检测人脸，首先检测人脸的个数，以及每个人脸所在的范围矩形OpenCVForUnityUtils.SetImage(_faceLandmarkDetector, photoMat);var faceRect = _faceLandmarkDetector.Detect();// 如果检测到的人脸个数大于零if (faceRect is { Count: > 0 }){// 获取最大的那个人脸（按照矩形的面积计算）var targetRect = GetMaxRect(faceRect);// 进一步检测68个人脸关键点var faceLandmarks = _faceLandmarkDetector.DetectLandmark(targetRect);// 将目标图进行一次克隆，以免改变原图using Mat targetMat = _faceTargetMat.clone();// 进行目标图换脸，即摄像头中的脸替换到目标图中using DlibFaceChanger faceChanger = new DlibFaceChanger();faceChanger.SetTargetImage(targetMat);faceChanger.AddFaceChangeData(photoMat, faceLandmarks, _targetLandmarks, 1f);faceChanger.ChangeFace();// 在目标人脸图的上面，叠加带有Alpha通道的“头盔”图，以完成最终效果using Mat dst = targetMat.clone();AlphaBlend(targetMat, _pictureOnMarsMat, dst);// 生成最终的纹理。展示到RawImage中。var finalTexture = new Texture2D(dst.width(), dst.height(), TextureFormat.RGBA32, false);Utils.matToTexture2D(dst, finalTexture);_FinalPhoto.texture = finalTexture;// 暂停摄像头，设置拍照完成标志_webCamTexture.Pause();_IsPhotoTaked = true;}else{const string info = "未检测到人脸";_infoText.text = info;}// 清理资源Destroy(photo);
}

二、图像Alpha融合（图像叠加）

将第二张图叠加到第一张图的上面，其实就设定第二张图的Alpha通道为a，第一张图乘以(1-a)再加上第二张图乘以a，就是追钟的图了。
private static void AlphaBlend(Mat one, Mat two, Mat dst)
{List<Mat> channels = new List<Mat>();// 首先分离第二章图的通道，获取alpha通道，并定义一个1-alphaCore.split(two, channels);using Mat alpha = channels[3];using Mat inv_alpha = new Mat(alpha.width(), alpha.height(), alpha.type());Core.bitwise_not(alpha, inv_alpha);// 第二张图 * alphausing Mat _two = new Mat();Core.multiply(alpha, channels[0], channels[0], 1.0 / 255);Core.multiply(alpha, channels[1], channels[1], 1.0 / 255);Core.multiply(alpha, channels[2], channels[2], 1.0 / 255);Core.merge(channels, _two);// 第一张图 * ( 1 - alpha )Core.split(one, channels);Core.multiply(inv_alpha, channels[0], channels[0], 1.0 / 255);Core.multiply(inv_alpha, channels[1], channels[1], 1.0 / 255);Core.multiply(inv_alpha, channels[2], channels[2], 1.0 / 255);using Mat _one = new Mat();Core.merge(channels, _one);// 合并两张图Core.add(_two, _one, dst);
}

三、安全的上传

如同“实现思路”中所说的，这里所指的安全的上传，主要是解决有人伪造客户端上传垃圾数据的问题，验证上传者的身份就很重要。我是这么实现的：

采用两次请求进行上传：

• 第一次，发送一组使用AES加密后的数据，数据中包含了一段固定的字符串，还有当前的时间，加入时间的目的是为了每次构造该数据时，内容都会发生变化，这样就使得数据无法复制，因为复制的数据里面包含的时间是不对的。当服务器收到这组数据的时候，进行解密，如果解密失败，或者解密后，固定的字符串内容不对，或者时间相差5分钟以上，则抛弃数据。否则，随机生成一个KEY，返回给客户端，弊端就是客户端和服务器的时间差不能超过5分钟。
• 第二次，当客户端收到服务器发回的KEY时，连同照片一起发送给服务器。服务器收到KEY后，与第一次生成的KEY进行对比，如果存在，并且距离生成的时间未超过5秒，那么认为KEY有效，则记录该照片，否则，抛弃数据。

这里贴一下AES加解密的代码：

public static byte[] Encrypt(byte[] rgbKey, byte[] rgbIV, string sourceText)
{using MemoryStream memoryStream = new MemoryStream();using (Aes aes = Aes.Create())using (ICryptoTransform transform = aes.CreateEncryptor(rgbKey, rgbIV))using (CryptoStream cryptoStream = new CryptoStream(memoryStream, transform, CryptoStreamMode.Write))using (StreamWriter streamWriter = new StreamWriter(cryptoStream)){streamWriter.Write(sourceText);streamWriter.Flush();}return memoryStream.ToArray();
}
public static string Decrypt(byte[] rgbKey, byte[] rgbIV, byte[] cipherBuffer)
{using MemoryStream stream = new MemoryStream(cipherBuffer);using Aes aes = Aes.Create();using ICryptoTransform transform = aes.CreateDecryptor(rgbKey, rgbIV);using CryptoStream cryptoStream = new CryptoStream(stream, transform, CryptoStreamMode.Read);using StreamReader streamReader = new StreamReader(cryptoStream);return streamReader.ReadToEnd();
}
public static byte[] Md5Encrypt(string tex)
{var md5 = MD5.Create();return md5.ComputeHash(Encoding.UTF8.GetBytes(tex));
}

四、图像的传输和存储

Unity和服务器之间发送图像时，使用的是Base64编码，这里记录一下使用Base64遇到的坑：

测试时，Unity端发过去的数据，服务器总是解析不成功，后来发现，Base64中编码后的串，个别的字符在传输过程中被改变了，比如“+”。。解决方法也很简单，先使用UnityWebRequest.EscapeURL()处理一下再发送就好了。

服务器端的存储，用的数据库直接存储的，使用的blob字段，还挺好用。

其他

因为Unity中的Texture，会被圆整为2的幂的尺寸，因此将texture如果直接生成图片，可能尺寸是不对的，所以，有时候需要克隆一下，同时改一下尺寸。

private static Texture2D ScaleTexture(Texture2D source, float targetWidth, float targetHeight)
{Texture2D result = new Texture2D((int)targetWidth, (int)targetHeight, source.format, false);for (int i = 0; i < result.height; ++i){for (int j = 0; j < result.width; ++j){Color newColor = source.GetPixelBilinear(j / (float)result.width, i / (float)result.height);result.SetPixel(j, i, newColor);}}result.Apply();return result;
}

最后

由于工程中涉及一些非免费的插件，源码就不分享了。这里只详细记录一下原理，和开发历程。