昨天好多人在@微信官方，求一顶帽子：


不要@微信官方了_java

最后知道真相的你，眼泪掉下来。


这次就用程序来实现一个自动带圣诞帽的头像。


准备：

  1. 头像+圣诞帽（png类型）

不要@微信官方了_java_02

不要@微信官方了_java_032.新建目录


  1. npm init

  3. npm install jquery.facedetection


3.新建face.html，加入如下代码：


  1. <!DOCTYPE html>

  2. <htmllang="en">

  3. <head>

  4.    <metacharset="UTF-8">

  5.    <title>圣诞帽</title>

  6. </head>

  7. <body>

  8. <imgsrc="./face.jpg"alt="face"id="j-face">

  9. <imgsrc="./maozi.png"alt="maozi"id="j-maozi">

  11. <scriptsrc="https://code.jquery.com/jquery-3.2.1.min.js"></script>

  12. <scriptsrc="./node_modules/jquery.facedetection/dist/jquery.facedetection.js"></script>

  13. <script>

  14.    let ratio=1.5;

  16.    $('#j-face').faceDetection({

  17.        complete:function(faces){

  18.            let maozi=document.querySelector('#j-maozi');

  19.            let{width,height,positionX,positionY}=faces[0];

  20.            maozi.style.cssText=`position:absolute;width:${width*ratio}px;height:${height*ratio}px;left:${positionX-width/3}px;top:${positionY-height/2}px`;

  21.        }

  22.    });

  23. </script>

  24. </body>

  25. </html>


4.结果

不要@微信官方了_java_04


原理：

1.利用计算机视觉（Computer Vision），识别出脸，给出坐标以及脸的大小等数据

2.设置圣诞帽的位置